framer-motion 6.4.3 → 7.0.0

package/dist/index.d.ts

@@ -2,7 +2,7 @@
 import * as React$1 from 'react';
 import { RefObject, CSSProperties, SVGAttributes, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, ReactHTML, DetailedHTMLFactory, HTMLAttributes, useEffect } from 'react';
 import { Easing as Easing$1, SpringOptions } from 'popmotion';
-import { InViewOptions } from '@motionone/dom';
+import { ScrollOptions, InViewOptions } from '@motionone/dom';
 
 /**
  * @public
@@ -3333,7 +3333,9 @@ declare const Reorder: {
         unselectable?: "off" | "on" | undefined;
         inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
-    } & MotionProps & React$1.RefAttributes<any>>;
+    } & MotionProps & {
+        children?: React$1.ReactNode;
+    } & React$1.RefAttributes<any>>;
     Item: React$1.ForwardRefExoticComponent<Props$1<unknown> & {
         color?: string | undefined;
         translate?: "no" | "yes" | undefined;
@@ -3586,7 +3588,9 @@ declare const Reorder: {
         unselectable?: "off" | "on" | undefined;
         inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
-    } & MotionProps & React$1.RefAttributes<any>>;
+    } & MotionProps & {
+        children?: React$1.ReactNode;
+    } & React$1.RefAttributes<any>>;
 };
 
 declare const animations: FeatureComponents;
@@ -3700,6 +3704,12 @@ interface TransformOptions<T> {
      * @public
      */
     ease?: Easing$1 | Easing$1[];
+    /**
+     * Provide a function that can interpolate between any two values in the provided range.
+     *
+     * @public
+     */
+    mixer?: (from: T, to: T) => (v: number) => any;
 }
 /**
  * Transforms numbers into other values by mapping them from an input range to an output range.
@@ -3894,64 +3904,36 @@ declare function useSpring(source: MotionValue | number, config?: SpringOptions)
  */
 declare function useVelocity(value: MotionValue<number>): MotionValue<number>;
 
-/**
- * @public
- */
-interface ScrollMotionValues {
+interface UseScrollOptions extends Omit<ScrollOptions, "container" | "target"> {
+    container?: RefObject<HTMLElement>;
+    target?: RefObject<HTMLElement>;
+}
+declare function useScroll({ container, target, ...options }?: UseScrollOptions): {
     scrollX: MotionValue<number>;
     scrollY: MotionValue<number>;
     scrollXProgress: MotionValue<number>;
     scrollYProgress: MotionValue<number>;
-}
+};
 
 /**
- * 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
+ * @deprecated useElementScroll is deprecated. Convert to useScroll({ container: ref })
  */
-declare function useElementScroll(ref: RefObject<HTMLElement>): ScrollMotionValues;
+declare function useElementScroll(ref: RefObject<HTMLElement>): {
+    scrollX: MotionValue<number>;
+    scrollY: MotionValue<number>;
+    scrollXProgress: MotionValue<number>;
+    scrollYProgress: MotionValue<number>;
+};
 
 /**
- * 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
+ * @deprecated useViewportScroll is deprecated. Convert to useScroll()
  */
-declare function useViewportScroll(): ScrollMotionValues;
+declare function useViewportScroll(): {
+    scrollX: MotionValue<number>;
+    scrollY: MotionValue<number>;
+    scrollXProgress: MotionValue<number>;
+    scrollYProgress: MotionValue<number>;
+};
 
 declare function useTime(): MotionValue<number>;
 
@@ -4197,6 +4179,16 @@ declare const LayoutGroupContext: React$1.Context<LayoutGroupContextProps>;
  */
 declare const DeprecatedLayoutGroupContext: React$1.Context<string | null>;
 
+/**
+ * @public
+ */
+interface ScrollMotionValues {
+    scrollX: MotionValue<number>;
+    scrollY: MotionValue<number>;
+    scrollXProgress: MotionValue<number>;
+    scrollYProgress: MotionValue<number>;
+}
+
 /**
  * This is not an officially supported API and may be removed
  * on any version.
@@ -4228,4 +4220,4 @@ interface ScaleMotionValues {
  */
 declare function useInvertedScale(scale?: Partial<ScaleMotionValues>): ScaleMotionValues;
 
-export { AnimatePresence, AnimatePresenceProps, AnimateSharedLayout, AnimationControls, AnimationLifecycles, AnimationOptions, AnimationPlaybackControls, AnimationProps, AnimationType, Axis, AxisDelta, BoundingBox, Box, CreateVisualElement, CustomDomComponent, CustomValueType, Delta, DeprecatedLayoutGroupContext, DragControls, DragElastic, DragHandlers, DraggableProps, EasingFunction, EventInfo, FeatureBundle, FeatureComponent, FeatureComponents, FeatureDefinition, FeatureDefinitions, FeatureNames, FeatureProps, FlatTree, FocusHandlers, ForwardRefComponent, HTMLMotionProps, HoverHandlers, IProjectionNode, Inertia, Keyframes, KeyframesTarget, LayoutGroup, LayoutGroupContext, LayoutProps, LazyFeatureBundle$1 as LazyFeatureBundle, LazyMotion, LazyProps, LoadedFeatures, MotionAdvancedProps, MotionConfig, MotionConfigContext, MotionConfigProps, MotionContext, MotionProps, MotionStyle, MotionTransform, MotionValue, None, Orchestration, PanHandlers, PanInfo, PassiveEffect, Point, PresenceContext, RelayoutInfo, RenderComponent, Reorder, Repeat, ResolveLayoutTransition, ResolvedKeyframesTarget, ResolvedSingleTarget, ResolvedValueTarget, ResolvedValues, SVGAttributesAsMotionValues, SVGMotionProps, ScrapeMotionValuesFromProps, ScrollMotionValues, SingleTarget, Spring, Subscriber, SwitchLayoutGroupContext, TapHandlers, TapInfo, Target, TargetAndTransition, TransformPoint, Transition, Tween, ValueTarget, Variant, VariantLabels, Variants, VisualElement, VisualElementLifecycles, VisualState, addPointerEvent, addScaleCorrector, animate, animateVisualElement, animationControls, animations, calcLength, checkTargetForNewValues, createBox, createDomMotionComponent, createMotionComponent, domAnimation, domMax, filterProps, isBrowser, isDragActive, isMotionValue, isValidMotionProp, m, makeUseVisualState, motion, motionValue, resolveMotionValue, transform, useAnimation, useAnimationControls, useAnimationFrame, useCycle, useAnimatedState as useDeprecatedAnimatedState, useInvertedScale as useDeprecatedInvertedScale, useDomEvent, useDragControls, useElementScroll, useForceUpdate, useInView, useInstantLayoutTransition, useInstantTransition, useIsPresent, useIsomorphicLayoutEffect, useMotionTemplate, useMotionValue, usePresence, useReducedMotion, useReducedMotionConfig, useResetProjection, useSpring, useTime, useTransform, useUnmountEffect, useVelocity, useViewportScroll, useVisualElementContext, visualElement, wrapHandler };
+export { AnimatePresence, AnimatePresenceProps, AnimateSharedLayout, AnimationControls, AnimationLifecycles, AnimationOptions, AnimationPlaybackControls, AnimationProps, AnimationType, Axis, AxisDelta, BoundingBox, Box, CreateVisualElement, CustomDomComponent, CustomValueType, Delta, DeprecatedLayoutGroupContext, DragControls, DragElastic, DragHandlers, DraggableProps, EasingFunction, EventInfo, FeatureBundle, FeatureComponent, FeatureComponents, FeatureDefinition, FeatureDefinitions, FeatureNames, FeatureProps, FlatTree, FocusHandlers, ForwardRefComponent, HTMLMotionProps, HoverHandlers, IProjectionNode, Inertia, Keyframes, KeyframesTarget, LayoutGroup, LayoutGroupContext, LayoutProps, LazyFeatureBundle$1 as LazyFeatureBundle, LazyMotion, LazyProps, LoadedFeatures, MotionAdvancedProps, MotionConfig, MotionConfigContext, MotionConfigProps, MotionContext, MotionProps, MotionStyle, MotionTransform, MotionValue, None, Orchestration, PanHandlers, PanInfo, PassiveEffect, Point, PresenceContext, RelayoutInfo, RenderComponent, Reorder, Repeat, ResolveLayoutTransition, ResolvedKeyframesTarget, ResolvedSingleTarget, ResolvedValueTarget, ResolvedValues, SVGAttributesAsMotionValues, SVGMotionProps, ScrapeMotionValuesFromProps, ScrollMotionValues, SingleTarget, Spring, Subscriber, SwitchLayoutGroupContext, TapHandlers, TapInfo, Target, TargetAndTransition, TransformPoint, Transition, Tween, ValueTarget, Variant, VariantLabels, Variants, VisualElement, VisualElementLifecycles, VisualState, addPointerEvent, addScaleCorrector, animate, animateVisualElement, animationControls, animations, calcLength, checkTargetForNewValues, createBox, createDomMotionComponent, createMotionComponent, domAnimation, domMax, filterProps, isBrowser, isDragActive, isMotionValue, isValidMotionProp, m, makeUseVisualState, motion, motionValue, resolveMotionValue, transform, useAnimation, useAnimationControls, useAnimationFrame, useCycle, useAnimatedState as useDeprecatedAnimatedState, useInvertedScale as useDeprecatedInvertedScale, useDomEvent, useDragControls, useElementScroll, useForceUpdate, useInView, useInstantLayoutTransition, useInstantTransition, useIsPresent, useIsomorphicLayoutEffect, useMotionTemplate, useMotionValue, usePresence, useReducedMotion, useReducedMotionConfig, useResetProjection, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVelocity, useViewportScroll, useVisualElementContext, visualElement, wrapHandler };