framer-motion 7.2.0 → 7.3.1

package/dist/es/projection/use-instant-layout-transition.mjs

@@ -3,12 +3,12 @@ import { rootProjectionNode } from './node/HTMLProjectionNode.mjs';
 function useInstantLayoutTransition() {
     return startTransition;
 }
-function startTransition(cb) {
+function startTransition(callback) {
     if (!rootProjectionNode.current)
         return;
     rootProjectionNode.current.isUpdating = false;
     rootProjectionNode.current.blockUpdate();
-    cb === null || cb === void 0 ? void 0 : cb();
+    callback && callback();
 }
 
 export { useInstantLayoutTransition };

package/dist/es/render/dom/features-animation.mjs

@@ -5,6 +5,10 @@ import { createDomVisualElement } from './create-visual-element.mjs';
 /**
  * @public
  */
-const domAnimation = Object.assign(Object.assign({ renderer: createDomVisualElement }, animations), gestureAnimations);
+const domAnimation = {
+    renderer: createDomVisualElement,
+    ...animations,
+    ...gestureAnimations,
+};
 
 export { domAnimation };

package/dist/es/render/dom/features-max.mjs

@@ -6,6 +6,11 @@ import { HTMLProjectionNode } from '../../projection/node/HTMLProjectionNode.mjs
 /**
  * @public
  */
-const domMax = Object.assign(Object.assign(Object.assign(Object.assign({}, domAnimation), drag), layoutFeatures), { projectionNodeConstructor: HTMLProjectionNode });
+const domMax = {
+    ...domAnimation,
+    ...drag,
+    ...layoutFeatures,
+    projectionNodeConstructor: HTMLProjectionNode,
+};
 
 export { domMax };

package/dist/es/render/dom/motion.mjs

@@ -8,7 +8,12 @@ import { createDomVisualElement } from './create-visual-element.mjs';
 import { layoutFeatures } from '../../motion/features/layout/index.mjs';
 import { HTMLProjectionNode } from '../../projection/node/HTMLProjectionNode.mjs';
 
-const featureBundle = Object.assign(Object.assign(Object.assign(Object.assign({}, animations), gestureAnimations), drag), layoutFeatures);
+const featureBundle = {
+    ...animations,
+    ...gestureAnimations,
+    ...drag,
+    ...layoutFeatures,
+};
 /**
  * HTML & SVG components, optimised for use with gestures and animation. These can be used as
  * drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.

package/dist/es/render/dom/use-render.mjs

@@ -11,7 +11,11 @@ function createUseRender(forwardMotionProps = false) {
             : useHTMLProps;
         const visualProps = useVisualProps(props, latestValues, isStatic);
         const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
-        const elementProps = Object.assign(Object.assign(Object.assign({}, filteredProps), visualProps), { ref });
+        const elementProps = {
+            ...filteredProps,
+            ...visualProps,
+            ref,
+        };
         if (projectionId) {
             elementProps["data-projection-id"] = projectionId;
         }

package/dist/es/render/dom/utils/camel-to-dash.mjs

@@ -1,8 +1,6 @@
-const CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g;
-const REPLACE_TEMPLATE = "$1-$2";
 /**
  * Convert camelCase to dash-case properties.
  */
-const camelToDash = (str) => str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase();
+const camelToDash = (str) => str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 
 export { camelToDash };

package/dist/es/render/dom/utils/create-config.mjs

@@ -7,9 +7,14 @@ function createDomMotionConfig(Component, { forwardMotionProps = false }, preloa
     const baseConfig = isSVGComponent(Component)
         ? svgMotionConfig
         : htmlMotionConfig;
-    return Object.assign(Object.assign({}, baseConfig), { preloadedFeatures, useRender: createUseRender(forwardMotionProps), createVisualElement,
+    return {
+        ...baseConfig,
+        preloadedFeatures,
+        useRender: createUseRender(forwardMotionProps),
+        createVisualElement,
         projectionNodeConstructor,
-        Component });
+        Component,
+    };
 }
 
 export { createDomMotionConfig };

package/dist/es/render/dom/utils/css-variables-conversion.mjs

@@ -1,4 +1,3 @@
-import { __rest } from 'tslib';
 import { invariant } from 'hey-listen';
 
 function isCSSVariable(value) {
@@ -46,16 +45,14 @@ function getVariableValue(current, element, depth = 1) {
  *
  * @internal
  */
-function resolveCSSVariables(visualElement, _a, transitionEnd) {
-    var _b;
-    var target = __rest(_a, []);
+function resolveCSSVariables(visualElement, { ...target }, transitionEnd) {
     const element = visualElement.getInstance();
     if (!(element instanceof Element))
         return { target, transitionEnd };
     // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
     // only if they change but I think this reads clearer and this isn't a performance-critical path.
     if (transitionEnd) {
-        transitionEnd = Object.assign({}, transitionEnd);
+        transitionEnd = { ...transitionEnd };
     }
     // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
     visualElement.forEachValue((value) => {
@@ -80,8 +77,9 @@ function resolveCSSVariables(visualElement, _a, transitionEnd) {
         // If the user hasn't already set this key on `transitionEnd`, set it to the unresolved
         // CSS variable. This will ensure that after the animation the component will reflect
         // changes in the value of the CSS variable.
-        if (transitionEnd)
-            (_b = transitionEnd[key]) !== null && _b !== void 0 ? _b : (transitionEnd[key] = current);
+        if (transitionEnd && transitionEnd[key] === undefined) {
+            transitionEnd[key] = current;
+        }
     }
     return { target, transitionEnd };
 }

package/dist/es/render/dom/utils/unit-conversion.mjs

@@ -1,7 +1,7 @@
 import { px, number } from 'style-value-types';
 import { isKeyframesTarget } from '../../../animation/utils/is-keyframes-target.mjs';
 import { invariant } from 'hey-listen';
-import { transformProps } from '../../html/utils/transform.mjs';
+import { transformPropOrder } from '../../html/utils/transform.mjs';
 import { findDimensionValueType } from '../value-types/dimensions.mjs';
 import { isBrowser } from '../../../utils/is-browser.mjs';
 
@@ -54,7 +54,7 @@ const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
     }
 };
 const transformKeys = new Set(["x", "y", "z"]);
-const nonTranslationalTransformKeys = transformProps.filter((key) => !transformKeys.has(key));
+const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
 function removeNonTranslationalTransform(visualElement) {
     const removedTransforms = [];
     nonTranslationalTransformKeys.forEach((key) => {
@@ -111,8 +111,8 @@ const convertChangedValueTypes = (target, visualElement, changedKeys) => {
     return target;
 };
 const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, transitionEnd = {}) => {
-    target = Object.assign({}, target);
-    transitionEnd = Object.assign({}, transitionEnd);
+    target = { ...target };
+    transitionEnd = { ...transitionEnd };
     const targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
     // We want to remove any transform values that could affect the element's bounding box before
     // it's measured. We'll reapply these later.

package/dist/es/render/dom/value-types/defaults.mjs

@@ -4,11 +4,23 @@ import { numberValueTypes } from './number.mjs';
 /**
  * A map of default value types for common values
  */
-const defaultValueTypes = Object.assign(Object.assign({}, numberValueTypes), { 
+const defaultValueTypes = {
+    ...numberValueTypes,
     // Color props
-    color, backgroundColor: color, outlineColor: color, fill: color, stroke: color, 
+    color,
+    backgroundColor: color,
+    outlineColor: color,
+    fill: color,
+    stroke: color,
     // Border props
-    borderColor: color, borderTopColor: color, borderRightColor: color, borderBottomColor: color, borderLeftColor: color, filter, WebkitFilter: filter });
+    borderColor: color,
+    borderTopColor: color,
+    borderRightColor: color,
+    borderBottomColor: color,
+    borderLeftColor: color,
+    filter,
+    WebkitFilter: filter,
+};
 /**
  * Gets the default ValueType for the provided value key
  */

package/dist/es/render/dom/value-types/type-int.mjs

@@ -1,5 +1,8 @@
 import { number } from 'style-value-types';
 
-const int = Object.assign(Object.assign({}, number), { transform: Math.round });
+const int = {
+    ...number,
+    transform: Math.round,
+};
 
 export { int };

package/dist/es/render/html/config-motion.mjs

@@ -4,7 +4,7 @@ import { createHtmlRenderState } from './utils/create-render-state.mjs';
 
 const htmlMotionConfig = {
     useVisualState: makeUseVisualState({
-        scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
+        scrapeMotionValuesFromProps,
         createRenderState: createHtmlRenderState,
     }),
 };

package/dist/es/render/html/use-props.mjs

@@ -15,28 +15,24 @@ function useInitialMotionValues({ transformTemplate }, visualState, isStatic) {
     return useMemo(() => {
         const state = createHtmlRenderState();
         buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);
-        const { vars, style } = state;
-        return Object.assign(Object.assign({}, vars), style);
+        return Object.assign({}, state.vars, state.style);
     }, [visualState]);
 }
 function useStyle(props, visualState, isStatic) {
     const styleProp = props.style || {};
-    let style = {};
+    const style = {};
     /**
      * Copy non-Motion Values straight into style
      */
     copyRawValuesOnly(style, styleProp, props);
     Object.assign(style, useInitialMotionValues(props, visualState, isStatic));
-    if (props.transformValues) {
-        style = props.transformValues(style);
-    }
-    return style;
+    return props.transformValues ? props.transformValues(style) : style;
 }
 function useHTMLProps(props, visualState, isStatic) {
     // The `any` isn't ideal but it is the type of createElement props argument
     const htmlProps = {};
     const style = useStyle(props, visualState, isStatic);
-    if (Boolean(props.drag) && props.dragListener !== false) {
+    if (props.drag && props.dragListener !== false) {
         // Disable the ghost element when a user drags
         htmlProps.draggable = false;
         // Disable text selection
@@ -54,4 +50,4 @@ function useHTMLProps(props, visualState, isStatic) {
     return htmlProps;
 }
 
-export { copyRawValuesOnly, useHTMLProps, useStyle };
+export { copyRawValuesOnly, useHTMLProps };

package/dist/es/render/html/utils/build-styles.mjs

@@ -1,15 +1,11 @@
-import { buildTransform, buildTransformOrigin } from './build-transform.mjs';
+import { buildTransform } from './build-transform.mjs';
 import { isCSSVariable } from '../../dom/utils/is-css-variable.mjs';
-import { isTransformProp, isTransformOriginProp } from './transform.mjs';
+import { transformProps } from './transform.mjs';
 import { getValueAsType } from '../../dom/value-types/get-as-type.mjs';
 import { numberValueTypes } from '../../dom/value-types/number.mjs';
 
 function buildHTMLStyles(state, latestValues, options, transformTemplate) {
-    var _a;
     const { style, vars, transform, transformKeys, transformOrigin } = state;
-    // Empty the transformKeys array. As we're throwing out refs to its items
-    // this might not be as cheap as suspected. Maybe using the array as a buffer
-    // with a manual incrementation would be better.
     transformKeys.length = 0;
     // Track whether we encounter any transform or transformOrigin values.
     let hasTransform = false;
@@ -34,7 +30,7 @@ function buildHTMLStyles(state, latestValues, options, transformTemplate) {
         // Convert the value to its default value type, ie 0 -> "0px"
         const valueType = numberValueTypes[key];
         const valueAsType = getValueAsType(value, valueType);
-        if (isTransformProp(key)) {
+        if (transformProps.has(key)) {
             // If this is a transform, flag to enable further transform processing
             hasTransform = true;
             transform[key] = valueAsType;
@@ -43,29 +39,35 @@ function buildHTMLStyles(state, latestValues, options, transformTemplate) {
             if (!transformIsNone)
                 continue;
             // Otherwise check to see if this is a default transform
-            if (value !== ((_a = valueType.default) !== null && _a !== void 0 ? _a : 0))
+            if (value !== (valueType.default || 0))
                 transformIsNone = false;
         }
-        else if (isTransformOriginProp(key)) {
-            transformOrigin[key] = valueAsType;
+        else if (key.startsWith("origin")) {
             // If this is a transform origin, flag and enable further transform-origin processing
             hasTransformOrigin = true;
+            transformOrigin[key] = valueAsType;
         }
         else {
             style[key] = valueAsType;
         }
     }
-    if (hasTransform) {
+    if (hasTransform || transformTemplate) {
         style.transform = buildTransform(state, options, transformIsNone, transformTemplate);
     }
-    else if (transformTemplate) {
-        style.transform = transformTemplate({}, "");
-    }
     else if (!latestValues.transform && style.transform) {
+        /**
+         * If we have previously created a transform but currently don't have any,
+         * reset transform style to none.
+         */
         style.transform = "none";
     }
+    /**
+     * Build a transformOrigin style. Uses the same defaults as the browser for
+     * undefined origins.
+     */
     if (hasTransformOrigin) {
-        style.transformOrigin = buildTransformOrigin(transformOrigin);
+        const { originX = "50%", originY = "50%", originZ = 0, } = transformOrigin;
+        style.transformOrigin = `${originX} ${originY} ${originZ}`;
     }
 }
 

package/dist/es/render/html/utils/build-transform.mjs

@@ -1,4 +1,4 @@
-import { sortTransformProps } from './transform.mjs';
+import { transformPropOrder } from './transform.mjs';
 
 const translateAlias = {
     x: "translateX",
@@ -6,6 +6,10 @@ const translateAlias = {
     z: "translateZ",
     transformPerspective: "perspective",
 };
+/**
+ * A function to use with Array.sort to sort transform keys by their default order.
+ */
+const sortTransformProps = (a, b) => transformPropOrder.indexOf(a) - transformPropOrder.indexOf(b);
 /**
  * Build a CSS transform style from individual x/y/scale etc properties.
  *
@@ -17,18 +21,11 @@ function buildTransform({ transform, transformKeys }, { enableHardwareAccelerati
     let transformString = "";
     // Transform keys into their default order - this will determine the output order.
     transformKeys.sort(sortTransformProps);
-    // Track whether the defined transform has a defined z so we don't add a
-    // second to enable hardware acceleration
-    let transformHasZ = false;
     // Loop over each transform and build them into transformString
-    const numTransformKeys = transformKeys.length;
-    for (let i = 0; i < numTransformKeys; i++) {
-        const key = transformKeys[i];
+    for (const key of transformKeys) {
         transformString += `${translateAlias[key] || key}(${transform[key]}) `;
-        if (key === "z")
-            transformHasZ = true;
     }
-    if (!transformHasZ && enableHardwareAcceleration) {
+    if (enableHardwareAcceleration && !transform.z) {
         transformString += "translateZ(0)";
     }
     transformString = transformString.trim();
@@ -42,12 +39,5 @@ function buildTransform({ transform, transformKeys }, { enableHardwareAccelerati
     }
     return transformString;
 }
-/**
- * Build a transformOrigin style. Uses the same defaults as the browser for
- * undefined origins.
- */
-function buildTransformOrigin({ originX = "50%", originY = "50%", originZ = 0, }) {
-    return `${originX} ${originY} ${originZ}`;
-}
 
-export { buildTransform, buildTransformOrigin };
+export { buildTransform };

package/dist/es/render/html/utils/transform.mjs

@@ -1,37 +1,28 @@
-/**
- * A list of all transformable axes. We'll use this list to generated a version
- * of each axes for each transform.
- */
-const transformAxes = ["", "X", "Y", "Z"];
-/**
- * An ordered array of each transformable value. By default, transform values
- * will be sorted to this order.
- */
-const order = ["translate", "scale", "rotate", "skew"];
 /**
  * Generate a list of every possible transform key.
  */
-const transformProps = ["transformPerspective", "x", "y", "z"];
-order.forEach((operationKey) => transformAxes.forEach((axesKey) => transformProps.push(operationKey + axesKey)));
-/**
- * A function to use with Array.sort to sort transform keys by their default order.
- */
-function sortTransformProps(a, b) {
-    return transformProps.indexOf(a) - transformProps.indexOf(b);
-}
+const transformPropOrder = [
+    "transformPerspective",
+    "x",
+    "y",
+    "z",
+    "translateX",
+    "translateY",
+    "translateZ",
+    "scale",
+    "scaleX",
+    "scaleY",
+    "rotate",
+    "rotateX",
+    "rotateY",
+    "rotateZ",
+    "skew",
+    "skewX",
+    "skewY",
+];
 /**
  * A quick lookup for transform props.
  */
-const transformPropSet = new Set(transformProps);
-function isTransformProp(key) {
-    return transformPropSet.has(key);
-}
-/**
- * A quick lookup for transform origin props
- */
-const transformOriginProps = new Set(["originX", "originY", "originZ"]);
-function isTransformOriginProp(key) {
-    return transformOriginProps.has(key);
-}
+const transformProps = new Set(transformPropOrder);
 
-export { isTransformOriginProp, isTransformProp, sortTransformProps, transformAxes, transformProps };
+export { transformPropOrder, transformProps };

package/dist/es/render/html/visual-element.mjs

@@ -1,10 +1,9 @@
-import { __rest } from 'tslib';
 import { visualElement } from '../index.mjs';
 import { getOrigin, checkTargetForNewValues } from '../utils/setters.mjs';
 import { buildHTMLStyles } from './utils/build-styles.mjs';
 import { isCSSVariable } from '../dom/utils/is-css-variable.mjs';
 import { parseDomVariant } from '../dom/utils/parse-dom-variant.mjs';
-import { isTransformProp } from './utils/transform.mjs';
+import { transformProps } from './utils/transform.mjs';
 import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
 import { renderHTML } from './utils/render.mjs';
 import { getDefaultValueType } from '../dom/value-types/defaults.mjs';
@@ -16,7 +15,7 @@ function getComputedStyle(element) {
 const htmlConfig = {
     treeType: "dom",
     readValueFromInstance(domElement, key) {
-        if (isTransformProp(key)) {
+        if (transformProps.has(key)) {
             const defaultType = getDefaultValueType(key);
             return defaultType ? defaultType.default || 0 : 0;
         }
@@ -69,10 +68,7 @@ const htmlConfig = {
      * Ensure that HTML and Framer-specific value types like `px`->`%` and `Color`
      * can be animated by Motion.
      */
-    makeTargetAnimatable(element, _a, _b, isMounted) {
-        var { transition, transitionEnd } = _a, target = __rest(_a, ["transition", "transitionEnd"]);
-        var transformValues = _b.transformValues;
-        if (isMounted === void 0) { isMounted = true; }
+    makeTargetAnimatable(element, { transition, transitionEnd, ...target }, { transformValues }, isMounted = true) {
         let origin = getOrigin(target, transition || {}, element);
         /**
          * If Framer has provided a function to convert `Color` etc value types, convert them
@@ -91,8 +87,11 @@ const htmlConfig = {
             transitionEnd = parsed.transitionEnd;
             target = parsed.target;
         }
-        return Object.assign({ transition,
-            transitionEnd }, target);
+        return {
+            transition,
+            transitionEnd,
+            ...target,
+        };
     },
     scrapeMotionValuesFromProps,
     build(element, renderState, latestValues, options, props) {