framer-motion 6.3.11 → 6.3.12

package/types/utils/array.d.ts

@@ -1,3 +0,0 @@
-export declare function addUniqueItem<T>(arr: T[], item: T): void;
-export declare function removeItem<T>(arr: T[], item: T): void;
-export declare function moveItem<T>([...arr]: T[], fromIndex: number, toIndex: number): T[];

package/types/utils/each-axis.d.ts

@@ -1 +0,0 @@
-export declare function eachAxis<T>(handler: (axis: "x" | "y") => T): T[];

package/types/utils/is-browser.d.ts

@@ -1 +0,0 @@
-export declare const isBrowser: boolean;

package/types/utils/is-numerical-string.d.ts

@@ -1,4 +0,0 @@
-/**
- * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
- */
-export declare const isNumericalString: (v: string) => boolean;

package/types/utils/is-ref-object.d.ts

@@ -1,2 +0,0 @@
-import { MutableRefObject } from "react";
-export declare function isRefObject<E = any>(ref: any): ref is MutableRefObject<E>;

package/types/utils/is-zero-value-string.d.ts

@@ -1,4 +0,0 @@
-/**
- * Check if the value is a zero value string like "0px" or "0%"
- */
-export declare const isZeroValueString: (v: string) => boolean;

package/types/utils/noop.d.ts

@@ -1 +0,0 @@
-export declare function noop<T>(any: T): T;

package/types/utils/process.d.ts

@@ -1 +0,0 @@
-export declare const env: string;

package/types/utils/resolve-value.d.ts

@@ -1,3 +0,0 @@
-import { CustomValueType, ValueTarget, SingleTarget } from "../types";
-export declare const isCustomValue: (v: any) => v is CustomValueType;
-export declare const resolveFinalValueInKeyframes: (v: ValueTarget) => SingleTarget;

package/types/utils/shallow-compare.d.ts

@@ -1 +0,0 @@
-export declare function shallowCompare(next: any[], prev: any[] | null): boolean;

package/types/utils/subscription-manager.d.ts

@@ -1,9 +0,0 @@
-declare type GenericHandler = (...args: any) => void;
-export declare class SubscriptionManager<Handler extends GenericHandler> {
-    private subscriptions;
-    add(handler: Handler): () => void;
-    notify(a?: Parameters<Handler>[0], b?: Parameters<Handler>[1], c?: Parameters<Handler>[2]): void;
-    getSize(): number;
-    clear(): void;
-}
-export {};

package/types/utils/time-conversion.d.ts

@@ -1,7 +0,0 @@
-/**
- * Converts seconds to milliseconds
- *
- * @param seconds - Time in seconds.
- * @return milliseconds - Converted time in milliseconds.
- */
-export declare const secondsToMilliseconds: (seconds: number) => number;

package/types/utils/transform.d.ts

@@ -1,91 +0,0 @@
-import { Easing } from "popmotion";
-/**
- * @public
- */
-export interface TransformOptions<T> {
-    /**
-     * Clamp values to within the given range. Defaults to `true`
-     *
-     * @public
-     */
-    clamp?: boolean;
-    /**
-     * Easing functions to use on the interpolations between each value in the input and output ranges.
-     *
-     * If provided as an array, the array must be one item shorter than the input and output ranges, as the easings apply to the transition **between** each.
-     *
-     * @public
-     */
-    ease?: Easing | Easing[];
-    /**
-     * @internal
-     */
-    mixer?: (from: T, to: T) => (v: number) => any;
-}
-/**
- * Transforms numbers into other values by mapping them from an input range to an output range.
- * Returns the type of the input provided.
- *
- * @remarks
- *
- * Given an input range of `[0, 200]` and an output range of
- * `[0, 1]`, this function will return a value between `0` and `1`.
- * The input range must be a linear series of numbers. The output range
- * can be any supported value type, such as numbers, colors, shadows, arrays, objects and more.
- * Every value in the output range must be of the same type and in the same format.
- *
- * ```jsx
- * import * as React from "react"
- * import { transform } from "framer-motion"
- *
- * export function MyComponent() {
- *    const inputRange = [0, 200]
- *    const outputRange = [0, 1]
- *    const output = transform(100, inputRange, outputRange)
- *
- *    // Returns 0.5
- *    return <div>{output}</div>
- * }
- * ```
- *
- * @param inputValue - A number to transform between the input and output ranges.
- * @param inputRange - A linear series of numbers (either all increasing or decreasing).
- * @param outputRange - A series of numbers, colors, strings, or arrays/objects of those. Must be the same length as `inputRange`.
- * @param options - Clamp: Clamp values to within the given range. Defaults to `true`.
- *
- * @public
- */
-export declare function transform<T>(inputValue: number, inputRange: number[], outputRange: T[], options?: TransformOptions<T>): T;
-/**
- *
- * Transforms numbers into other values by mapping them from an input range to an output range.
- *
- * Given an input range of `[0, 200]` and an output range of
- * `[0, 1]`, this function will return a value between `0` and `1`.
- * The input range must be a linear series of numbers. The output range
- * can be any supported value type, such as numbers, colors, shadows, arrays, objects and more.
- * Every value in the output range must be of the same type and in the same format.
- *
- * ```jsx
- * import * as React from "react"
- * import { Frame, transform } from "framer"
- *
- * export function MyComponent() {
- *     const inputRange = [-200, -100, 100, 200]
- *     const outputRange = [0, 1, 1, 0]
- *     const convertRange = transform(inputRange, outputRange)
- *     const output = convertRange(-150)
- *
- *     // Returns 0.5
- *     return <div>{output}</div>
- * }
- *
- * ```
- *
- * @param inputRange - A linear series of numbers (either all increasing or decreasing).
- * @param outputRange - A series of numbers, colors or strings. Must be the same length as `inputRange`.
- * @param options - Clamp: clamp values to within the given range. Defaults to `true`.
- *
- * @public
- */
-export declare function transform<T>(inputRange: number[], outputRange: T[], options?: TransformOptions<T>): (inputValue: number) => T;

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

@@ -1,2 +0,0 @@
-export declare type FrameCallback = (timestamp: number) => void;
-export declare function useAnimationFrame(callback: FrameCallback): void;

package/types/utils/use-constant.d.ts

@@ -1,10 +0,0 @@
-declare type Init<T> = () => T;
-/**
- * Creates a constant value over the lifecycle of a component.
- *
- * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
- * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
- * you can ensure that initialisers don't execute twice or more.
- */
-export declare function useConstant<T>(init: Init<T>): T;
-export {};

package/types/utils/use-cycle.d.ts

@@ -1,30 +0,0 @@
-declare type Cycle = (i?: number) => void;
-declare type CycleState<T> = [T, Cycle];
-/**
- * Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to `useState` in React. It is provided an initial array of possible states, and returns an array of two arguments.
- *
- * An index value can be passed to the returned `cycle` function to cycle to a specific index.
- *
- * ```jsx
- * import * as React from "react"
- * import { motion, useCycle } from "framer-motion"
- *
- * export const MyComponent = () => {
- *   const [x, cycleX] = useCycle(0, 50, 100)
- *
- *   return (
- *     <motion.div
- *       animate={{ x: x }}
- *       onTap={() => cycleX()}
- *      />
- *    )
- * }
- * ```
- *
- * @param items - items to cycle through
- * @returns [currentState, cycleState]
- *
- * @public
- */
-export declare function useCycle<T>(...items: T[]): CycleState<T>;
-export {};

package/types/utils/use-force-update.d.ts

@@ -1 +0,0 @@
-export declare function useForceUpdate(): [VoidFunction, number];

package/types/utils/use-id.d.ts

@@ -1,6 +0,0 @@
-export declare const useId: () => number;
-/**
- * Ideally we'd use the following code to support React 18 optionally.
- * But this fairly fails in Webpack (otherwise treeshaking wouldn't work at all).
- * Need to come up with a different way of figuring this out.
- */

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

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

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

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

package/types/utils/use-is-mounted.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function useIsMounted(): import("react").MutableRefObject<boolean>;

package/types/utils/use-isomorphic-effect.d.ts

@@ -1,2 +0,0 @@
-import { useEffect } from "react";
-export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/types/utils/use-reduced-motion.d.ts

@@ -1,28 +0,0 @@
-/**
- * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
- *
- * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
- * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
- *
- * It will actively respond to changes and re-render your components with the latest setting.
- *
- * ```jsx
- * export function Sidebar({ isOpen }) {
- *   const shouldReduceMotion = useReducedMotion()
- *   const closedX = shouldReduceMotion ? 0 : "-100%"
- *
- *   return (
- *     <motion.div animate={{
- *       opacity: isOpen ? 1 : 0,
- *       x: isOpen ? 0 : closedX
- *     }} />
- *   )
- * }
- * ```
- *
- * @return boolean
- *
- * @public
- */
-export declare function useReducedMotion(): boolean | null;
-export declare function useReducedMotionConfig(): boolean | null;

package/types/utils/use-unmount-effect.d.ts

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

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

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

package/types/value/index.d.ts

@@ -1,260 +0,0 @@
-import { SubscriptionManager } from "../utils/subscription-manager";
-export declare type Transformer<T> = (v: T) => T;
-/**
- * @public
- */
-export declare type Subscriber<T> = (v: T) => void;
-/**
- * @public
- */
-export declare type PassiveEffect<T> = (v: T, safeSetter: (v: T) => void) => void;
-export declare type StartAnimation = (complete: () => void) => () => void;
-/**
- * `MotionValue` is used to track the state and velocity of motion values.
- *
- * @public
- */
-export declare class MotionValue<V = any> {
-    /**
-     * This will be replaced by the build step with the latest version number.
-     * When MotionValues are provided to motion components, warn if versions are mixed.
-     */
-    version: string;
-    /**
-     * The current state of the `MotionValue`.
-     *
-     * @internal
-     */
-    private current;
-    /**
-     * The previous state of the `MotionValue`.
-     *
-     * @internal
-     */
-    private prev;
-    /**
-     * Duration, in milliseconds, since last updating frame.
-     *
-     * @internal
-     */
-    private timeDelta;
-    /**
-     * Timestamp of the last time this `MotionValue` was updated.
-     *
-     * @internal
-     */
-    private lastUpdated;
-    /**
-     * Functions to notify when the `MotionValue` updates.
-     *
-     * @internal
-     */
-    private updateSubscribers;
-    /**
-     * Functions to notify when the velocity updates.
-     *
-     * @internal
-     */
-    velocityUpdateSubscribers: SubscriptionManager<Subscriber<number>>;
-    /**
-     * Functions to notify when the `MotionValue` updates and `render` is set to `true`.
-     *
-     * @internal
-     */
-    private renderSubscribers;
-    /**
-     * Add a passive effect to this `MotionValue`.
-     *
-     * A passive effect intercepts calls to `set`. For instance, `useSpring` adds
-     * a passive effect that attaches a `spring` to the latest
-     * set value. Hypothetically there could be a `useSmooth` that attaches an input smoothing effect.
-     *
-     * @internal
-     */
-    private passiveEffect?;
-    /**
-     * A reference to the currently-controlling Popmotion animation
-     *
-     * @internal
-     */
-    private stopAnimation?;
-    /**
-     * Tracks whether this value can output a velocity. Currently this is only true
-     * if the value is numerical, but we might be able to widen the scope here and support
-     * other value types.
-     *
-     * @internal
-     */
-    private canTrackVelocity;
-    /**
-     * @param init - The initiating value
-     * @param config - Optional configuration options
-     *
-     * -  `transformer`: A function to transform incoming values with.
-     *
-     * @internal
-     */
-    constructor(init: V);
-    /**
-     * Adds a function that will be notified when the `MotionValue` is updated.
-     *
-     * It returns a function that, when called, will cancel the subscription.
-     *
-     * When calling `onChange` inside a React component, it should be wrapped with the
-     * `useEffect` hook. As it returns an unsubscribe function, this should be returned
-     * from the `useEffect` function to ensure you don't add duplicate subscribers..
-     *
-     * ```jsx
-     * export const MyComponent = () => {
-     *   const x = useMotionValue(0)
-     *   const y = useMotionValue(0)
-     *   const opacity = useMotionValue(1)
-     *
-     *   useEffect(() => {
-     *     function updateOpacity() {
-     *       const maxXY = Math.max(x.get(), y.get())
-     *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
-     *       opacity.set(newOpacity)
-     *     }
-     *
-     *     const unsubscribeX = x.onChange(updateOpacity)
-     *     const unsubscribeY = y.onChange(updateOpacity)
-     *
-     *     return () => {
-     *       unsubscribeX()
-     *       unsubscribeY()
-     *     }
-     *   }, [])
-     *
-     *   return <motion.div style={{ x }} />
-     * }
-     * ```
-     *
-     * @internalremarks
-     *
-     * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.
-     *
-     * ```jsx
-     * useOnChange(x, () => {})
-     * ```
-     *
-     * @param subscriber - A function that receives the latest value.
-     * @returns A function that, when called, will cancel this subscription.
-     *
-     * @public
-     */
-    onChange(subscription: Subscriber<V>): () => void;
-    clearListeners(): void;
-    /**
-     * Adds a function that will be notified when the `MotionValue` requests a render.
-     *
-     * @param subscriber - A function that's provided the latest value.
-     * @returns A function that, when called, will cancel this subscription.
-     *
-     * @internal
-     */
-    onRenderRequest(subscription: Subscriber<V>): () => void;
-    /**
-     * Attaches a passive effect to the `MotionValue`.
-     *
-     * @internal
-     */
-    attach(passiveEffect: PassiveEffect<V>): void;
-    /**
-     * Sets the state of the `MotionValue`.
-     *
-     * @remarks
-     *
-     * ```jsx
-     * const x = useMotionValue(0)
-     * x.set(10)
-     * ```
-     *
-     * @param latest - Latest value to set.
-     * @param render - Whether to notify render subscribers. Defaults to `true`
-     *
-     * @public
-     */
-    set(v: V, render?: boolean): void;
-    updateAndNotify: (v: V, render?: boolean) => void;
-    /**
-     * Returns the latest state of `MotionValue`
-     *
-     * @returns - The latest state of `MotionValue`
-     *
-     * @public
-     */
-    get(): V;
-    /**
-     * @public
-     */
-    getPrevious(): V;
-    /**
-     * Returns the latest velocity of `MotionValue`
-     *
-     * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
-     *
-     * @public
-     */
-    getVelocity(): number;
-    /**
-     * Schedule a velocity check for the next frame.
-     *
-     * This is an instanced and bound function to prevent generating a new
-     * function once per frame.
-     *
-     * @internal
-     */
-    private scheduleVelocityCheck;
-    /**
-     * Updates `prev` with `current` if the value hasn't been updated this frame.
-     * This ensures velocity calculations return `0`.
-     *
-     * This is an instanced and bound function to prevent generating a new
-     * function once per frame.
-     *
-     * @internal
-     */
-    private velocityCheck;
-    hasAnimated: boolean;
-    /**
-     * Registers a new animation to control this `MotionValue`. Only one
-     * animation can drive a `MotionValue` at one time.
-     *
-     * ```jsx
-     * value.start()
-     * ```
-     *
-     * @param animation - A function that starts the provided animation
-     *
-     * @internal
-     */
-    start(animation: StartAnimation): Promise<void>;
-    /**
-     * Stop the currently active animation.
-     *
-     * @public
-     */
-    stop(): void;
-    /**
-     * Returns `true` if this value is currently animating.
-     *
-     * @public
-     */
-    isAnimating(): boolean;
-    private clearAnimation;
-    /**
-     * Destroy and clean up subscribers to this `MotionValue`.
-     *
-     * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
-     * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
-     * created a `MotionValue` via the `motionValue` function.
-     *
-     * @public
-     */
-    destroy(): void;
-}
-/**
- * @internal
- */
-export declare function motionValue<V>(init: V): MotionValue<V>;

package/types/value/scroll/use-element-scroll.d.ts

@@ -1,28 +0,0 @@
-import { RefObject } from "react";
-import { ScrollMotionValues } from "./utils";
-/**
- * Returns MotionValues that update when the provided element scrolls:
- *
- * - `scrollX` — Horizontal scroll distance in pixels.
- * - `scrollY` — Vertical scroll distance in pixels.
- * - `scrollXProgress` — Horizontal scroll progress between `0` and `1`.
- * - `scrollYProgress` — Vertical scroll progress between `0` and `1`.
- *
- * This element must be set to `overflow: scroll` on either or both axes to report scroll offset.
- *
- * ```jsx
- * export const MyComponent = () => {
- *   const ref = useRef()
- *   const { scrollYProgress } = useElementScroll(ref)
- *
- *   return (
- *     <div ref={ref}>
- *       <motion.div style={{ scaleX: scrollYProgress }} />
- *     </div>
- *   )
- * }
- * ```
- *
- * @public
- */
-export declare function useElementScroll(ref: RefObject<HTMLElement>): ScrollMotionValues;

package/types/value/scroll/use-viewport-scroll.d.ts

@@ -1,22 +0,0 @@
-import { ScrollMotionValues } from "./utils";
-/**
- * Returns MotionValues that update when the viewport scrolls:
- *
- * - `scrollX` — Horizontal scroll distance in pixels.
- * - `scrollY` — Vertical scroll distance in pixels.
- * - `scrollXProgress` — Horizontal scroll progress between `0` and `1`.
- * - `scrollYProgress` — Vertical scroll progress between `0` and `1`.
- *
- * **Warning:** Setting `body` or `html` to `height: 100%` or similar will break the `Progress`
- * values as this breaks the browser's capability to accurately measure the page length.
- *
- * ```jsx
- * export const MyComponent = () => {
- *   const { scrollYProgress } = useViewportScroll()
- *   return <motion.div style={{ scaleX: scrollYProgress }} />
- * }
- * ```
- *
- * @public
- */
-export declare function useViewportScroll(): ScrollMotionValues;

package/types/value/scroll/utils.d.ts

@@ -1,19 +0,0 @@
-import { MotionValue } from "../";
-/**
- * @public
- */
-export interface ScrollMotionValues {
-    scrollX: MotionValue<number>;
-    scrollY: MotionValue<number>;
-    scrollXProgress: MotionValue<number>;
-    scrollYProgress: MotionValue<number>;
-}
-export interface ScrollOffsets {
-    xOffset: number;
-    yOffset: number;
-    xMaxOffset: number;
-    yMaxOffset: number;
-}
-export declare type GetScrollOffsets = () => ScrollOffsets;
-export declare function createScrollMotionValues(): ScrollMotionValues;
-export declare function createScrollUpdater(values: ScrollMotionValues, getOffsets: GetScrollOffsets): () => void;

package/types/value/use-combine-values.d.ts

@@ -1,2 +0,0 @@
-import { MotionValue } from ".";
-export declare function useCombineMotionValues<R>(values: MotionValue[], combineValues: () => R): MotionValue<R>;

package/types/value/use-inverted-scale.d.ts

@@ -1,28 +0,0 @@
-import { MotionValue } from "./";
-interface ScaleMotionValues {
-    scaleX: MotionValue<number>;
-    scaleY: MotionValue<number>;
-}
-export declare const invertScale: (scale: number) => number;
-/**
- * Returns a `MotionValue` each for `scaleX` and `scaleY` that update with the inverse
- * of their respective parent scales.
- *
- * This is useful for undoing the distortion of content when scaling a parent component.
- *
- * By default, `useInvertedScale` will automatically fetch `scaleX` and `scaleY` from the nearest parent.
- * By passing other `MotionValue`s in as `useInvertedScale({ scaleX, scaleY })`, it will invert the output
- * of those instead.
- *
- * ```jsx
- * const MyComponent = () => {
- *   const { scaleX, scaleY } = useInvertedScale()
- *   return <motion.div style={{ scaleX, scaleY }} />
- * }
- * ```
- *
- * @deprecated
- * @internal
- */
-export declare function useInvertedScale(scale?: Partial<ScaleMotionValues>): ScaleMotionValues;
-export {};

package/types/value/use-motion-template.d.ts

@@ -1,24 +0,0 @@
-import { MotionValue } from ".";
-/**
- * Combine multiple motion values into a new one using a string template literal.
- *
- * ```jsx
- * import {
- *   motion,
- *   useSpring,
- *   useMotionValue,
- *   useMotionTemplate
- * } from "framer-motion"
- *
- * function Component() {
- *   const shadowX = useSpring(0)
- *   const shadowY = useMotionValue(0)
- *   const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`
- *
- *   return <motion.div style={{ filter: shadow }} />
- * }
- * ```
- *
- * @public
- */
-export declare function useMotionTemplate(fragments: TemplateStringsArray, ...values: MotionValue[]): MotionValue<string>;

package/types/value/use-motion-value.d.ts

@@ -1,19 +0,0 @@
-import { MotionValue } from ".";
-/**
- * Creates a `MotionValue` to track the state and velocity of a value.
- *
- * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
- *
- * ```jsx
- * export const MyComponent = () => {
- *   const scale = useMotionValue(1)
- *
- *   return <motion.div style={{ scale }} />
- * }
- * ```
- *
- * @param initial - The initial state.
- *
- * @public
- */
-export declare function useMotionValue<T>(initial: T): MotionValue<T>;