framer-motion 11.13.1 → 11.13.3

package/README.md

@@ -105,6 +105,8 @@ Motion powers Framer animations, the web builder for creative pros. Design and s
 
 <a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/31436a47-951e-4eab-9a68-bdd54ccf9444" width="225px" height="150px"></a>
 
+<a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/4fae0c9d-de0f-4042-9cd6-e07885d028a9" width="225px" height="150px"></a>
+
 ### Silver
 
 <a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/07d23aa5-69db-44a0-849d-90177e6fc817" width="150px" height="100px"></a>

package/dist/cjs/client.js

@@ -3333,7 +3333,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.13.1";
+        this.version = "11.13.3";
         /**
          * 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
@@ -5857,7 +5857,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.13.1", `Attempting to mix Motion versions ${nextValue.version} with 11.13.1 may not work as expected.`);
+                warnOnce(nextValue.version === "11.13.3", `Attempting to mix Motion versions ${nextValue.version} with 11.13.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -8593,25 +8593,26 @@ const drag = {
     },
 };
 
-function handleHoverEvent(node, event, isActive) {
+function handleHoverEvent(node, event, lifecycle) {
     const { props } = node;
     if (node.animationState && props.whileHover) {
-        node.animationState.setActive("whileHover", isActive);
+        node.animationState.setActive("whileHover", lifecycle === "Start");
     }
-    const callback = props[isActive ? "onHoverStart" : "onHoverEnd"];
+    const eventName = ("onHover" + lifecycle);
+    const callback = props[eventName];
     if (callback) {
         frame.postRender(() => callback(event, extractEventInfo(event)));
     }
 }
 class HoverGesture extends Feature {
     mount() {
-        const { current, props } = this.node;
+        const { current } = this.node;
         if (!current)
             return;
         this.unmount = motionDom.hover(current, (startEvent) => {
-            handleHoverEvent(this.node, startEvent, true);
-            return (endEvent) => handleHoverEvent(this.node, endEvent, false);
-        }, { passive: !props.onHoverStart && !props.onHoverEnd });
+            handleHoverEvent(this.node, startEvent, "Start");
+            return (endEvent) => handleHoverEvent(this.node, endEvent, "End");
+        });
     }
     unmount() { }
 }
@@ -8949,7 +8950,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(null);
     /**
      * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
      */

package/dist/cjs/dom.js

@@ -280,7 +280,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.13.1";
+        this.version = "11.13.3";
         /**
          * 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
@@ -4117,7 +4117,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.13.1", `Attempting to mix Motion versions ${nextValue.version} with 11.13.1 may not work as expected.`);
+                warnOnce(nextValue.version === "11.13.3", `Attempting to mix Motion versions ${nextValue.version} with 11.13.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/index.js

@@ -3416,7 +3416,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.13.1";
+        this.version = "11.13.3";
         /**
          * 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
@@ -6260,7 +6260,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.13.1", `Attempting to mix Motion versions ${nextValue.version} with 11.13.1 may not work as expected.`);
+                warnOnce(nextValue.version === "11.13.3", `Attempting to mix Motion versions ${nextValue.version} with 11.13.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -10077,25 +10077,26 @@ const drag = {
     },
 };
 
-function handleHoverEvent(node, event, isActive) {
+function handleHoverEvent(node, event, lifecycle) {
     const { props } = node;
     if (node.animationState && props.whileHover) {
-        node.animationState.setActive("whileHover", isActive);
+        node.animationState.setActive("whileHover", lifecycle === "Start");
     }
-    const callback = props[isActive ? "onHoverStart" : "onHoverEnd"];
+    const eventName = ("onHover" + lifecycle);
+    const callback = props[eventName];
     if (callback) {
         frame.postRender(() => callback(event, extractEventInfo(event)));
     }
 }
 class HoverGesture extends Feature {
     mount() {
-        const { current, props } = this.node;
+        const { current } = this.node;
         if (!current)
             return;
         this.unmount = motionDom.hover(current, (startEvent) => {
-            handleHoverEvent(this.node, startEvent, true);
-            return (endEvent) => handleHoverEvent(this.node, endEvent, false);
-        }, { passive: !props.onHoverStart && !props.onHoverEnd });
+            handleHoverEvent(this.node, startEvent, "Start");
+            return (endEvent) => handleHoverEvent(this.node, endEvent, "End");
+        });
     }
     unmount() { }
 }
@@ -10433,7 +10434,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(null);
     /**
      * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
      */
@@ -12461,7 +12462,7 @@ function startTransition(callback) {
 function useInstantTransition() {
     const [forceUpdate, forcedRenderCount] = useForceUpdate();
     const startInstantLayoutTransition = useInstantLayoutTransition();
-    const unlockOnFrameRef = React.useRef();
+    const unlockOnFrameRef = React.useRef(-1);
     React.useEffect(() => {
         /**
          * Unblock after two animation frames, otherwise this will unblock too soon.

package/dist/cjs/m.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(null);
     /**
      * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
      */

package/dist/client.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 { SVGAttributes, CSSProperties, PropsWithoutRef, RefAttributes } from 'react';
 
 type EasingFunction = (v: number) => number;
 type BezierDefinition = readonly [number, number, number, number];
@@ -1584,7 +1584,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.
@@ -2034,7 +2034,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;
@@ -2294,13 +2294,131 @@ type MotionComponentProps<Props> = {
     [K in Exclude<keyof Props, keyof MotionProps>]?: Props[K];
 } & MotionProps;
 
-type UnionStringArray$1<T extends Readonly<string[]>> = T[number];
+type UnionStringArray<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 SVGElements = UnionStringArray<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>;
+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
@@ -2308,25 +2426,20 @@ type HTMLElements = UnionStringArray<typeof htmlElements>;
 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 keyof HTMLElements> = 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>>;
+    [K in keyof HTMLElements]: ForwardRefComponent<HTMLElements[K], HTMLMotionProps<K>>;
 };
 
 interface SVGAttributesWithoutMotionProps<T> extends Pick<SVGAttributes<T>, Exclude<keyof SVGAttributes<T>, keyof MotionProps>> {
@@ -2427,7 +2540,7 @@ type DOMMotionComponents = HTMLMotionComponents & SVGMotionComponents;
 
 declare const createMotionComponent: <Props, TagName extends string = "div">(Component: string | TagName | React$1.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" | "div" | "abbr" | "address" | "area" | "aside" | "audio" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "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" | "sup" | "tbody" | "td" | "tfoot" | "th" | "thead" | "title" | "tr" | "track" | "u" | "ul" | "video" | "wbr" | "big" | "svg" | "keygen" | "param" | "webview" | "defs" | "desc" | "ellipse" | "g" | "line" | "metadata" | "pattern" | "polygon" | "polyline" | "rect" | "tspan" | "use" | "view" | "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" ? DOMMotionComponents[TagName] : React$1.ForwardRefExoticComponent<MotionComponentProps<React$1.PropsWithChildren<Props>>>;
+}) => TagName extends "symbol" | "filter" | "stop" | "clipPath" | "mask" | "marker" | "animate" | "text" | "path" | "image" | "circle" | "switch" | "svg" | keyof HTMLElements | "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" | "textPath" | "tspan" | "use" | "view" ? DOMMotionComponents[TagName] : React$1.ForwardRefExoticComponent<MotionComponentProps<React$1.PropsWithChildren<Props>>>;
 
 /**
  * HTML components