motion 12.7.4 → 12.7.5-alpha.0

package/dist/cjs/react-m.js

@@ -5,6 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
+const clamp = (min, max, v) => {
+    if (v > max)
+        return max;
+    if (v < min)
+        return min;
+    return v;
+};
+
 let warning = () => { };
 let invariant = () => { };
 if (process.env.NODE_ENV !== "production") {
@@ -20,6 +28,8 @@ if (process.env.NODE_ENV !== "production") {
     };
 }
 
+const MotionGlobalConfig = {};
+
 /*#__NO_SIDE_EFFECTS__*/
 const noop = (any) => any;
 
@@ -171,12 +181,8 @@ function useMotionRef(visualState, visualElement, externalRef) {
     [visualElement]);
 }
 
-const statsBuffer = {
-    value: null,
-    addProjectionMetrics: null,
-};
-
 const stepsOrder = [
+    "setup", // Compute
     "read", // Read
     "resolveKeyframes", // Write/Read/Write/Read
     "update", // Compute
@@ -185,6 +191,11 @@ const stepsOrder = [
     "postRender", // Compute
 ];
 
+const statsBuffer = {
+    value: null,
+    addProjectionMetrics: null,
+};
+
 function createRenderStep(runNextFrame, stepName) {
     /**
      * We create and reuse two queues, one to queue jobs for the current frame
@@ -288,11 +299,13 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
         acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
         return acc;
     }, {});
-    const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
+    const { setup, read, resolveKeyframes, update, preRender, render, postRender, } = steps;
     const processBatch = () => {
-        const timestamp = performance.now();
+        const timestamp = MotionGlobalConfig.useManualTiming
+            ? state.timestamp
+            : performance.now();
         runNextFrame = false;
-        {
+        if (!MotionGlobalConfig.useManualTiming) {
             state.delta = useDefaultElapsed
                 ? 1000 / 60
                 : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
@@ -300,6 +313,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
         state.timestamp = timestamp;
         state.isProcessing = true;
         // Unrolled render loop for better per-frame performance
+        setup.process(state);
         read.process(state);
         resolveKeyframes.process(state);
         update.process(state);
@@ -336,10 +350,156 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     return { schedule, cancel, state, steps };
 }
 
+const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+
+const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
+const isCSSVariableName = 
+/*@__PURE__*/ checkStringStartsWith("--");
+
+const number = {
+    test: (v) => typeof v === "number",
+    parse: parseFloat,
+    transform: (v) => v,
+};
+const alpha = {
+    ...number,
+    transform: (v) => clamp(0, 1, v),
+};
+const scale = {
+    ...number,
+    default: 1,
+};
+
+/*#__NO_SIDE_EFFECTS__*/
+const createUnitType = (unit) => ({
+    test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
+    parse: parseFloat,
+    transform: (v) => `${v}${unit}`,
+});
+const degrees = /*@__PURE__*/ createUnitType("deg");
+const percent = /*@__PURE__*/ createUnitType("%");
+const px = /*@__PURE__*/ createUnitType("px");
+const progressPercentage = /*@__PURE__*/ (() => ({
+    ...percent,
+    parse: (v) => percent.parse(v) / 100,
+    transform: (v) => percent.transform(v * 100),
+}))();
+
+/**
+ * Generate a list of every possible transform key.
+ */
+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 transformProps = /*@__PURE__*/ (() => new Set(transformPropOrder))();
+
+const int = {
+    ...number,
+    transform: Math.round,
+};
+
+const transformValueTypes = {
+    rotate: degrees,
+    rotateX: degrees,
+    rotateY: degrees,
+    rotateZ: degrees,
+    scale,
+    scaleX: scale,
+    scaleY: scale,
+    scaleZ: scale,
+    skew: degrees,
+    skewX: degrees,
+    skewY: degrees,
+    distance: px,
+    translateX: px,
+    translateY: px,
+    translateZ: px,
+    x: px,
+    y: px,
+    z: px,
+    perspective: px,
+    transformPerspective: px,
+    opacity: alpha,
+    originX: progressPercentage,
+    originY: progressPercentage,
+    originZ: px,
+};
+
+const numberValueTypes = {
+    // Border props
+    borderWidth: px,
+    borderTopWidth: px,
+    borderRightWidth: px,
+    borderBottomWidth: px,
+    borderLeftWidth: px,
+    borderRadius: px,
+    radius: px,
+    borderTopLeftRadius: px,
+    borderTopRightRadius: px,
+    borderBottomRightRadius: px,
+    borderBottomLeftRadius: px,
+    // Positioning props
+    width: px,
+    maxWidth: px,
+    height: px,
+    maxHeight: px,
+    top: px,
+    right: px,
+    bottom: px,
+    left: px,
+    // Spacing props
+    padding: px,
+    paddingTop: px,
+    paddingRight: px,
+    paddingBottom: px,
+    paddingLeft: px,
+    margin: px,
+    marginTop: px,
+    marginRight: px,
+    marginBottom: px,
+    marginLeft: px,
+    // Misc
+    backgroundPositionX: px,
+    backgroundPositionY: px,
+    ...transformValueTypes,
+    zIndex: int,
+    size: px,
+    // SVG
+    fillOpacity: alpha,
+    strokeOpacity: alpha,
+    numOctaves: int,
+};
+
 const { schedule: microtask, cancel: cancelMicrotask } = 
 /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
 
-const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+/**
+ * Provided a value and a ValueType, returns the value as that value type.
+ */
+const getValueAsType = (value, type) => {
+    return type && typeof value === "number"
+        ? type.transform(value)
+        : value;
+};
 
 /**
  * Convert camelCase to dash-case properties.
@@ -567,39 +727,8 @@ function getProjectionFunctionality(props) {
     };
 }
 
-const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
-const isCSSVariableName = 
-/*@__PURE__*/ checkStringStartsWith("--");
-
 const scaleCorrectors = {};
 
-/**
- * Generate a list of every possible transform key.
- */
-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 transformProps = new Set(transformPropOrder);
-
 function isForcedMotionValue(key, { layout, layoutId }) {
     return (transformProps.has(key) ||
         key.startsWith("origin") ||
@@ -609,132 +738,6 @@ function isForcedMotionValue(key, { layout, layoutId }) {
 
 const isMotionValue = (value) => Boolean(value && value.getVelocity);
 
-/**
- * Provided a value and a ValueType, returns the value as that value type.
- */
-const getValueAsType = (value, type) => {
-    return type && typeof value === "number"
-        ? type.transform(value)
-        : value;
-};
-
-const clamp = (min, max, v) => {
-    if (v > max)
-        return max;
-    if (v < min)
-        return min;
-    return v;
-};
-
-const number = {
-    test: (v) => typeof v === "number",
-    parse: parseFloat,
-    transform: (v) => v,
-};
-const alpha = {
-    ...number,
-    transform: (v) => clamp(0, 1, v),
-};
-const scale = {
-    ...number,
-    default: 1,
-};
-
-const createUnitType = (unit) => ({
-    test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
-    parse: parseFloat,
-    transform: (v) => `${v}${unit}`,
-});
-const degrees = /*@__PURE__*/ createUnitType("deg");
-const percent = /*@__PURE__*/ createUnitType("%");
-const px = /*@__PURE__*/ createUnitType("px");
-const progressPercentage = {
-    ...percent,
-    parse: (v) => percent.parse(v) / 100,
-    transform: (v) => percent.transform(v * 100),
-};
-
-const browserNumberValueTypes = {
-    // Border props
-    borderWidth: px,
-    borderTopWidth: px,
-    borderRightWidth: px,
-    borderBottomWidth: px,
-    borderLeftWidth: px,
-    borderRadius: px,
-    radius: px,
-    borderTopLeftRadius: px,
-    borderTopRightRadius: px,
-    borderBottomRightRadius: px,
-    borderBottomLeftRadius: px,
-    // Positioning props
-    width: px,
-    maxWidth: px,
-    height: px,
-    maxHeight: px,
-    top: px,
-    right: px,
-    bottom: px,
-    left: px,
-    // Spacing props
-    padding: px,
-    paddingTop: px,
-    paddingRight: px,
-    paddingBottom: px,
-    paddingLeft: px,
-    margin: px,
-    marginTop: px,
-    marginRight: px,
-    marginBottom: px,
-    marginLeft: px,
-    // Misc
-    backgroundPositionX: px,
-    backgroundPositionY: px,
-};
-
-const transformValueTypes = {
-    rotate: degrees,
-    rotateX: degrees,
-    rotateY: degrees,
-    rotateZ: degrees,
-    scale,
-    scaleX: scale,
-    scaleY: scale,
-    scaleZ: scale,
-    skew: degrees,
-    skewX: degrees,
-    skewY: degrees,
-    distance: px,
-    translateX: px,
-    translateY: px,
-    translateZ: px,
-    x: px,
-    y: px,
-    z: px,
-    perspective: px,
-    transformPerspective: px,
-    opacity: alpha,
-    originX: progressPercentage,
-    originY: progressPercentage,
-    originZ: px,
-};
-
-const int = {
-    ...number,
-    transform: Math.round,
-};
-
-const numberValueTypes = {
-    ...browserNumberValueTypes,
-    ...transformValueTypes,
-    zIndex: int,
-    size: px,
-    // SVG
-    fillOpacity: alpha,
-    strokeOpacity: alpha,
-    numOctaves: int,
-};
-
 const translateAlias = {
     x: "translateX",
     y: "translateY",