framer-motion 11.5.2 → 12.0.0-alpha.1

package/dist/cjs/client-entry.js

@@ -2268,13 +2268,13 @@ class MainThreadAnimation extends BaseAnimation {
          * animation.stop is returned as a reference from a useEffect.
          */
         this.stop = () => {
+            const { onStop } = this.options;
+            onStop && onStop();
             this.resolver.cancel();
             this.isStopped = true;
             if (this.state === "idle")
                 return;
             this.teardown();
-            const { onStop } = this.options;
-            onStop && onStop();
         };
         const { name, motionValue, element, keyframes } = this.options;
         const KeyframeResolver$1 = (element === null || element === void 0 ? void 0 : element.KeyframeResolver) || KeyframeResolver;
@@ -3227,7 +3227,7 @@ class MotionValue {
          * 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.
          */
-        this.version = "11.5.2";
+        this.version = "12.0.0-alpha.1";
         /**
          * 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
@@ -5850,7 +5850,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.5.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.5.2 may not work as expected.`);
+                warnOnce(nextValue.version === "12.0.0-alpha.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 12.0.0-alpha.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -8975,7 +8975,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
     const lazyContext = react.useContext(LazyContext);
     const presenceContext = react.useContext(PresenceContext);
     const reducedMotionConfig = react.useContext(MotionConfigContext).reducedMotion;
-    const visualElementRef = react.useRef();
+    const visualElementRef = react.useRef(undefined);
     /**
      * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
      */

package/dist/cjs/dom-entry.js

@@ -279,7 +279,7 @@ class MotionValue {
          * 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.
          */
-        this.version = "11.5.2";
+        this.version = "12.0.0-alpha.1";
         /**
          * 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
@@ -2674,13 +2674,13 @@ class MainThreadAnimation extends BaseAnimation {
          * animation.stop is returned as a reference from a useEffect.
          */
         this.stop = () => {
+            const { onStop } = this.options;
+            onStop && onStop();
             this.resolver.cancel();
             this.isStopped = true;
             if (this.state === "idle")
                 return;
             this.teardown();
-            const { onStop } = this.options;
-            onStop && onStop();
         };
         const { name, motionValue, element, keyframes } = this.options;
         const KeyframeResolver$1 = (element === null || element === void 0 ? void 0 : element.KeyframeResolver) || KeyframeResolver;
@@ -3790,7 +3790,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.5.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.5.2 may not work as expected.`);
+                warnOnce(nextValue.version === "12.0.0-alpha.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 12.0.0-alpha.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/index.js

@@ -2338,13 +2338,13 @@ class MainThreadAnimation extends BaseAnimation {
          * animation.stop is returned as a reference from a useEffect.
          */
         this.stop = () => {
+            const { onStop } = this.options;
+            onStop && onStop();
             this.resolver.cancel();
             this.isStopped = true;
             if (this.state === "idle")
                 return;
             this.teardown();
-            const { onStop } = this.options;
-            onStop && onStop();
         };
         const { name, motionValue, element, keyframes } = this.options;
         const KeyframeResolver$1 = (element === null || element === void 0 ? void 0 : element.KeyframeResolver) || KeyframeResolver;
@@ -3310,7 +3310,7 @@ class MotionValue {
          * 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.
          */
-        this.version = "11.5.2";
+        this.version = "12.0.0-alpha.1";
         /**
          * 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
@@ -5965,7 +5965,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.5.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.5.2 may not work as expected.`);
+                warnOnce(nextValue.version === "12.0.0-alpha.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 12.0.0-alpha.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -10117,7 +10117,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
     const lazyContext = React.useContext(LazyContext);
     const presenceContext = React.useContext(PresenceContext);
     const reducedMotionConfig = React.useContext(MotionConfigContext).reducedMotion;
-    const visualElementRef = React.useRef();
+    const visualElementRef = React.useRef(undefined);
     /**
      * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
      */
@@ -12483,7 +12483,7 @@ function startTransition(callback) {
 function useInstantTransition() {
     const [forceUpdate, forcedRenderCount] = useForceUpdate();
     const startInstantLayoutTransition = useInstantLayoutTransition();
-    const unlockOnFrameRef = React.useRef();
+    const unlockOnFrameRef = React.useRef(undefined);
     React.useEffect(() => {
         /**
          * Unblock after two animation frames, otherwise this will unblock too soon.

package/dist/cjs/m-entry.js

@@ -202,7 +202,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
     const lazyContext = react.useContext(LazyContext);
     const presenceContext = react.useContext(PresenceContext);
     const reducedMotionConfig = react.useContext(MotionConfigContext).reducedMotion;
-    const visualElementRef = react.useRef();
+    const visualElementRef = react.useRef(undefined);
     /**
      * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
      */

package/dist/client-entry.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import * as React$1 from 'react';
-import { SVGAttributes, CSSProperties, PropsWithoutRef, RefAttributes, ReactHTML, DetailedHTMLFactory, HTMLAttributes } from 'react';
+import * as react from 'react';
+import { SVGAttributes, CSSProperties, PropsWithoutRef, RefAttributes, JSX, HTMLElementType } from 'react';
 
 type EasingFunction = (v: number) => number;
 type BezierDefinition = [number, number, number, number];
@@ -1386,7 +1386,7 @@ declare class DragControls {
      *
      * @public
      */
-    start(event: React$1.PointerEvent | PointerEvent, options?: DragControlOptions): void;
+    start(event: react.PointerEvent | PointerEvent, options?: DragControlOptions): void;
 }
 
 type DragElastic = boolean | number | Partial<BoundingBox>;
@@ -1539,7 +1539,7 @@ interface DraggableProps extends DragHandlers {
      * }
      * ```
      */
-    dragConstraints?: false | Partial<BoundingBox> | RefObject<Element>;
+    dragConstraints?: false | Partial<BoundingBox> | RefObject<Element | null>;
     /**
      * The degree of movement allowed outside constraints. 0 = no movement, 1 =
      * full movement.
@@ -1990,7 +1990,7 @@ interface HoverHandlers {
 
 type ViewportEventHandler = (entry: IntersectionObserverEntry | null) => void;
 interface ViewportOptions {
-    root?: RefObject<Element>;
+    root?: RefObject<Element | null>;
     once?: boolean;
     margin?: string;
     amount?: "some" | "all" | number;
@@ -2250,39 +2250,151 @@ type MotionComponentProps<Props> = {
     [K in Exclude<keyof Props, keyof MotionProps>]?: Props[K];
 } & MotionProps;
 
-type UnionStringArray$1<T extends Readonly<string[]>> = T[number];
-declare const svgElements: readonly ["animate", "circle", "defs", "desc", "ellipse", "g", "image", "line", "filter", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "rect", "stop", "svg", "switch", "symbol", "text", "tspan", "use", "view", "clipPath", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "foreignObject", "linearGradient", "radialGradient", "textPath"];
-type SVGElements = UnionStringArray$1<typeof svgElements>;
-
 type UnionStringArray<T extends Readonly<string[]>> = T[number];
-declare const htmlElements: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "var", "video", "wbr", "webview"];
-type HTMLElements = UnionStringArray<typeof htmlElements>;
+declare const svgElements: readonly ["animate", "circle", "defs", "desc", "ellipse", "g", "image", "line", "filter", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "rect", "stop", "svg", "switch", "symbol", "text", "tspan", "use", "view", "clipPath", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "foreignObject", "linearGradient", "radialGradient", "textPath"];
+type SVGElements = UnionStringArray<typeof svgElements>;
 
+interface HTMLElements {
+    a: HTMLAnchorElement;
+    abbr: HTMLElement;
+    address: HTMLElement;
+    area: HTMLAreaElement;
+    article: HTMLElement;
+    aside: HTMLElement;
+    audio: HTMLAudioElement;
+    b: HTMLElement;
+    base: HTMLBaseElement;
+    bdi: HTMLElement;
+    bdo: HTMLElement;
+    big: HTMLElement;
+    blockquote: HTMLQuoteElement;
+    body: HTMLBodyElement;
+    br: HTMLBRElement;
+    button: HTMLButtonElement;
+    canvas: HTMLCanvasElement;
+    caption: HTMLElement;
+    center: HTMLElement;
+    cite: HTMLElement;
+    code: HTMLElement;
+    col: HTMLTableColElement;
+    colgroup: HTMLTableColElement;
+    data: HTMLDataElement;
+    datalist: HTMLDataListElement;
+    dd: HTMLElement;
+    del: HTMLModElement;
+    details: HTMLDetailsElement;
+    dfn: HTMLElement;
+    dialog: HTMLDialogElement;
+    div: HTMLDivElement;
+    dl: HTMLDListElement;
+    dt: HTMLElement;
+    em: HTMLElement;
+    embed: HTMLEmbedElement;
+    fieldset: HTMLFieldSetElement;
+    figcaption: HTMLElement;
+    figure: HTMLElement;
+    footer: HTMLElement;
+    form: HTMLFormElement;
+    h1: HTMLHeadingElement;
+    h2: HTMLHeadingElement;
+    h3: HTMLHeadingElement;
+    h4: HTMLHeadingElement;
+    h5: HTMLHeadingElement;
+    h6: HTMLHeadingElement;
+    head: HTMLHeadElement;
+    header: HTMLElement;
+    hgroup: HTMLElement;
+    hr: HTMLHRElement;
+    html: HTMLHtmlElement;
+    i: HTMLElement;
+    iframe: HTMLIFrameElement;
+    img: HTMLImageElement;
+    input: HTMLInputElement;
+    ins: HTMLModElement;
+    kbd: HTMLElement;
+    keygen: HTMLElement;
+    label: HTMLLabelElement;
+    legend: HTMLLegendElement;
+    li: HTMLLIElement;
+    link: HTMLLinkElement;
+    main: HTMLElement;
+    map: HTMLMapElement;
+    mark: HTMLElement;
+    menu: HTMLElement;
+    menuitem: HTMLElement;
+    meta: HTMLMetaElement;
+    meter: HTMLMeterElement;
+    nav: HTMLElement;
+    noindex: HTMLElement;
+    noscript: HTMLElement;
+    object: HTMLObjectElement;
+    ol: HTMLOListElement;
+    optgroup: HTMLOptGroupElement;
+    option: HTMLOptionElement;
+    output: HTMLOutputElement;
+    p: HTMLParagraphElement;
+    param: HTMLParamElement;
+    picture: HTMLElement;
+    pre: HTMLPreElement;
+    progress: HTMLProgressElement;
+    q: HTMLQuoteElement;
+    rp: HTMLElement;
+    rt: HTMLElement;
+    ruby: HTMLElement;
+    s: HTMLElement;
+    samp: HTMLElement;
+    search: HTMLElement;
+    slot: HTMLSlotElement;
+    script: HTMLScriptElement;
+    section: HTMLElement;
+    select: HTMLSelectElement;
+    small: HTMLElement;
+    source: HTMLSourceElement;
+    span: HTMLSpanElement;
+    strong: HTMLElement;
+    style: HTMLStyleElement;
+    sub: HTMLElement;
+    summary: HTMLElement;
+    sup: HTMLElement;
+    table: HTMLTableElement;
+    template: HTMLTemplateElement;
+    tbody: HTMLTableSectionElement;
+    td: HTMLTableDataCellElement;
+    textarea: HTMLTextAreaElement;
+    tfoot: HTMLTableSectionElement;
+    th: HTMLTableHeaderCellElement;
+    thead: HTMLTableSectionElement;
+    time: HTMLTimeElement;
+    title: HTMLTitleElement;
+    tr: HTMLTableRowElement;
+    track: HTMLTrackElement;
+    u: HTMLElement;
+    ul: HTMLUListElement;
+    var: HTMLElement;
+    video: HTMLVideoElement;
+    wbr: HTMLElement;
+    webview: HTMLWebViewElement;
+}
 /**
  * @public
  */
 type ForwardRefComponent<T, P> = {
     readonly $$typeof: symbol;
 } & ((props: PropsWithoutRef<P> & RefAttributes<T>) => JSX.Element);
-/**
- * Support for React component props
- */
-type UnwrapFactoryAttributes<F> = F extends DetailedHTMLFactory<infer P, any> ? P : never;
-type UnwrapFactoryElement<F> = F extends DetailedHTMLFactory<any, infer P> ? P : never;
-type HTMLAttributesWithoutMotionProps<Attributes extends HTMLAttributes<Element>, Element extends HTMLElement> = {
+type AttributesWithoutMotionProps<Attributes> = {
     [K in Exclude<keyof Attributes, keyof MotionProps>]?: Attributes[K];
 };
 /**
  * @public
  */
-type HTMLMotionProps<TagName extends keyof ReactHTML> = HTMLAttributesWithoutMotionProps<UnwrapFactoryAttributes<ReactHTML[TagName]>, UnwrapFactoryElement<ReactHTML[TagName]>> & MotionProps;
+type HTMLMotionProps<Tag extends HTMLElementType> = AttributesWithoutMotionProps<JSX.IntrinsicElements[Tag]> & MotionProps;
 /**
  * Motion-optimised versions of React's HTML components.
  *
  * @public
  */
 type HTMLMotionComponents = {
-    [K in HTMLElements]: ForwardRefComponent<UnwrapFactoryElement<ReactHTML[K]>, HTMLMotionProps<K>>;
+    [Tag in HTMLElementType]: ForwardRefComponent<HTMLElements[Tag], HTMLMotionProps<Tag>>;
 };
 
 interface SVGAttributesWithoutMotionProps<T> extends Pick<SVGAttributes<T>, Exclude<keyof SVGAttributes<T>, keyof MotionProps>> {
@@ -2368,9 +2480,9 @@ declare global {
 
 type DOMMotionComponents = HTMLMotionComponents & SVGMotionComponents;
 
-declare const createMotionComponent: <Props, TagName extends string = "div">(Component: string | TagName | React$1.ForwardRefExoticComponent<Props>, { forwardMotionProps }?: {
+declare const createMotionComponent: <Props, TagName extends string = "div">(Component: string | TagName | react.ForwardRefExoticComponent<Props>, { forwardMotionProps }?: {
     forwardMotionProps: boolean;
-}) => TagName extends "symbol" | "object" | "map" | "filter" | "stop" | "clipPath" | "mask" | "marker" | "a" | "b" | "var" | "style" | "animate" | "progress" | "text" | "ruby" | "table" | "small" | "embed" | "sub" | "path" | "image" | "button" | "meter" | "textarea" | "circle" | "pre" | "caption" | "menu" | "menuitem" | "article" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "option" | "switch" | "time" | "big" | "sup" | "abbr" | "address" | "area" | "aside" | "audio" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "div" | "dl" | "dt" | "em" | "fieldset" | "figcaption" | "footer" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "mark" | "meta" | "nav" | "noscript" | "ol" | "optgroup" | "output" | "p" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "tbody" | "td" | "tfoot" | "th" | "thead" | "title" | "tr" | "track" | "u" | "ul" | "video" | "wbr" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "line" | "linearGradient" | "metadata" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "svg" | "textPath" | "tspan" | "use" | "view" | "keygen" | "param" | "webview" ? DOMMotionComponents[TagName] : React$1.ForwardRefExoticComponent<MotionComponentProps<React$1.PropsWithChildren<Props>>>;
+}) => TagName extends "symbol" | "filter" | "stop" | "clipPath" | "mask" | "marker" | "animate" | "text" | "path" | "image" | "circle" | "switch" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "line" | "linearGradient" | "metadata" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "svg" | "textPath" | "tspan" | "use" | "view" | react.HTMLElementType ? DOMMotionComponents[TagName] : react.ForwardRefExoticComponent<MotionComponentProps<react.PropsWithChildren<Props>>>;
 
 /**
  * HTML components