framer-motion 5.3.3 → 5.4.0-beta

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

@@ -1,16 +1,9 @@
 import { number, px, percent, degrees, vw, vh } from 'style-value-types';
-import { testValueType } from './test.mjs';
 import { auto } from './type-auto.mjs';
 
 /**
  * A list of value types commonly used for dimensions
  */
 var dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
-/**
- * Tests a dimensional value against the list of dimension ValueTypes
- */
-var findDimensionValueType = function (v) {
-    return dimensionValueTypes.find(testValueType(v));
-};
 
-export { dimensionValueTypes, findDimensionValueType };
+export { dimensionValueTypes };

package/dist/es/render/three/create-visual-element.mjs

@@ -0,0 +1,42 @@
+import { visualElement } from '../index.mjs';
+import { createBox } from '../../projection/geometry/models.mjs';
+import { checkTargetForNewValues } from '../utils/setters.mjs';
+import { setThreeValue } from './utils/set-value.mjs';
+import { readThreeValue } from './utils/read-value.mjs';
+
+var scrapeMotionValuesFromProps = function () { return ({}); };
+var createRenderState = function () { return ({}); };
+var threeVisualElement = visualElement({
+    treeType: "three",
+    readValueFromInstance: readThreeValue,
+    getBaseTarget: function (_props, _key) {
+        return 0;
+    },
+    sortNodePosition: function (_a, _b) {
+        return 0;
+    },
+    makeTargetAnimatable: function (element, target) {
+        checkTargetForNewValues(element, target, {});
+        return target;
+    },
+    restoreTransform: function () { },
+    resetTransform: function () { },
+    removeValueFromRenderState: function (_key, _renderState) { },
+    measureViewportBox: createBox,
+    scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
+    build: function (_element, state, latestValues) {
+        for (var key in latestValues) {
+            state[key] = latestValues[key];
+        }
+    },
+    render: function (instance, renderState) {
+        for (var key in renderState) {
+            setThreeValue(instance, key, renderState);
+        }
+    },
+});
+var createVisualElement = function (_, options) {
+    return threeVisualElement(options);
+};
+
+export { createRenderState, createVisualElement, scrapeMotionValuesFromProps, threeVisualElement };

package/dist/es/render/three/gestures/use-hover.mjs

@@ -0,0 +1,22 @@
+import { AnimationType } from '../../utils/types.mjs';
+
+function useHover(isStatic, _a, visualElement) {
+    var whileHover = _a.whileHover, onHoverStart = _a.onHoverStart, onHoverEnd = _a.onHoverEnd, onPointerOver = _a.onPointerOver, onPointerOut = _a.onPointerOut;
+    var isHoverEnabled = whileHover || onHoverStart || onHoverEnd;
+    if (isStatic || !visualElement || !isHoverEnabled)
+        return {};
+    return {
+        onPointerOver: function (event) {
+            var _a;
+            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Hover, true);
+            onPointerOver === null || onPointerOver === void 0 ? void 0 : onPointerOver(event);
+        },
+        onPointerOut: function (event) {
+            var _a;
+            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Hover, false);
+            onPointerOut === null || onPointerOut === void 0 ? void 0 : onPointerOut(event);
+        },
+    };
+}
+
+export { useHover };

package/dist/es/render/three/gestures/use-tap.mjs

@@ -0,0 +1,56 @@
+import { pipe } from 'popmotion';
+import { useRef } from 'react';
+import { wrapHandler } from '../../../events/event-info.mjs';
+import { addPointerEvent } from '../../../events/use-pointer-event.mjs';
+import { isDragActive } from '../../../gestures/drag/utils/lock.mjs';
+import { AnimationType } from '../../utils/types.mjs';
+
+function useTap(isStatic, _a, visualElement) {
+    var whileTap = _a.whileTap, onTapStart = _a.onTapStart, onTap = _a.onTap, onTapCancel = _a.onTapCancel, onPointerDown = _a.onPointerDown;
+    var isTapEnabled = onTap || onTapStart || onTapCancel || whileTap;
+    var isPressing = useRef(false);
+    var cancelPointerEndListeners = useRef(null);
+    if (isStatic || !visualElement || !isTapEnabled)
+        return {};
+    function removePointerEndListener() {
+        var _a;
+        (_a = cancelPointerEndListeners.current) === null || _a === void 0 ? void 0 : _a.call(cancelPointerEndListeners);
+        cancelPointerEndListeners.current = null;
+    }
+    function checkPointerEnd() {
+        var _a;
+        removePointerEndListener();
+        isPressing.current = false;
+        (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Tap, false);
+        return !isDragActive();
+    }
+    function onPointerUp(event, info) {
+        if (!checkPointerEnd())
+            return;
+        /**
+         * We only count this as a tap gesture if the event.target is the same
+         * as, or a child of, this component's element
+         */
+        onTap === null || onTap === void 0 ? void 0 : onTap(event, info);
+    }
+    function onPointerCancel(event, info) {
+        if (!checkPointerEnd())
+            return;
+        onTapCancel === null || onTapCancel === void 0 ? void 0 : onTapCancel(event, info);
+    }
+    return {
+        onPointerDown: wrapHandler(function (event, info) {
+            var _a;
+            removePointerEndListener();
+            if (isPressing.current)
+                return;
+            isPressing.current = true;
+            cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp), addPointerEvent(window, "pointercancel", onPointerCancel));
+            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Tap, true);
+            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+            onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info);
+        }, true),
+    };
+}
+
+export { useTap };

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

@@ -0,0 +1,30 @@
+import { __assign } from 'tslib';
+import { createMotionComponent } from '../../motion/index.mjs';
+import { animations } from '../../motion/features/animations.mjs';
+import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
+import { useRender } from './use-render.mjs';
+import { scrapeMotionValuesFromProps, createRenderState, createVisualElement } from './create-visual-element.mjs';
+
+var useVisualState = makeUseVisualState({
+    scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
+    createRenderState: createRenderState,
+});
+var preloadedFeatures = __assign({}, animations);
+function custom(Component) {
+    return createMotionComponent({
+        Component: Component,
+        preloadedFeatures: preloadedFeatures,
+        useRender: useRender,
+        useVisualState: useVisualState,
+        createVisualElement: createVisualElement,
+    });
+}
+var componentCache = new Map();
+var motion = new Proxy(custom, {
+    get: function (_, key) {
+        !componentCache.has(key) && componentCache.set(key, custom(key));
+        return componentCache.get(key);
+    },
+});
+
+export { motion };

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

@@ -0,0 +1,11 @@
+import { __assign } from 'tslib';
+import { createElement } from 'react';
+import { filterProps } from '../dom/utils/filter-props.mjs';
+import { useHover } from './gestures/use-hover.mjs';
+import { useTap } from './gestures/use-tap.mjs';
+
+var useRender = function (Component, props, _projectionId, ref, _state, isStatic, visualElement) {
+    return createElement(Component, __assign(__assign(__assign(__assign({ ref: ref }, filterProps(props, false, false)), { onUpdate: props.onInstanceUpdate }), useHover(isStatic, props, visualElement)), useTap(isStatic, props, visualElement)));
+};
+
+export { useRender };

package/dist/es/render/three/utils/read-value.mjs

@@ -0,0 +1,43 @@
+import { Color } from 'three';
+
+var readVector = function (name, defaultValue) {
+    return function (axis) {
+        return function (instance) {
+            var value = instance[name];
+            return value ? value[axis] : defaultValue;
+        };
+    };
+};
+var readPosition = readVector("position", 0);
+var readScale = readVector("scale", 1);
+var readRotation = readVector("rotation", 0);
+var readers = {
+    x: readPosition("x"),
+    y: readPosition("y"),
+    z: readPosition("z"),
+    scale: readScale("x"),
+    scaleX: readScale("x"),
+    scaleY: readScale("y"),
+    scaleZ: readScale("z"),
+    rotateX: readRotation("x"),
+    rotateY: readRotation("y"),
+    rotateZ: readRotation("z"),
+};
+function readAnimatableValue(value) {
+    if (!value)
+        return;
+    if (value instanceof Color) {
+        return value.getStyle();
+    }
+    else {
+        return value;
+    }
+}
+function readThreeValue(instance, name) {
+    var _a;
+    return readers[name]
+        ? readers[name](instance)
+        : (_a = readAnimatableValue(instance[name])) !== null && _a !== void 0 ? _a : 0;
+}
+
+export { readThreeValue };

package/dist/es/render/three/utils/set-value.mjs

@@ -0,0 +1,59 @@
+import { Vector3, Euler, Color } from 'three';
+
+var setVector = function (name, defaultValue) {
+    return function (i) {
+        return function (instance, value) {
+            var _a;
+            (_a = instance[name]) !== null && _a !== void 0 ? _a : (instance[name] = new Vector3(defaultValue));
+            var vector = instance[name];
+            vector.setComponent(i, value);
+        };
+    };
+};
+var setEuler = function (name, defaultValue) {
+    return function (axis) {
+        return function (instance, value) {
+            var _a;
+            (_a = instance[name]) !== null && _a !== void 0 ? _a : (instance[name] = new Euler(defaultValue));
+            var euler = instance[name];
+            euler[axis] = value;
+        };
+    };
+};
+var setColor = function (name) { return function (instance, value) {
+    var _a;
+    (_a = instance[name]) !== null && _a !== void 0 ? _a : (instance[name] = new Color(value));
+    instance[name].set(value);
+}; };
+var setScale = setVector("scale", 1);
+var setPosition = setVector("position", 0);
+var setRotation = setEuler("rotation", 0);
+var setters = {
+    x: setPosition(0),
+    y: setPosition(1),
+    z: setPosition(2),
+    scale: function (instance, value) {
+        var _a;
+        (_a = instance.scale) !== null && _a !== void 0 ? _a : (instance.scale = new Vector3(1));
+        var scale = instance.scale;
+        scale.set(value, value, value);
+    },
+    scaleX: setScale(0),
+    scaleY: setScale(1),
+    scaleZ: setScale(2),
+    rotateX: setRotation("x"),
+    rotateY: setRotation("y"),
+    rotateZ: setRotation("z"),
+    color: setColor("color"),
+    specular: setColor("specular"),
+};
+function setThreeValue(instance, key, values) {
+    if (setters[key]) {
+        setters[key](instance, values[key]);
+    }
+    else {
+        instance[key] = values[key];
+    }
+}
+
+export { setThreeValue };

package/dist/es/render/utils/animation.mjs

@@ -119,9 +119,6 @@ function animateChildren(visualElement, variant, delayChildren, staggerChildren,
     });
     return Promise.all(animations);
 }
-function stopAnimation(visualElement) {
-    visualElement.forEachValue(function (value) { return value.stop(); });
-}
 function sortByTreeOrder(a, b) {
     return a.sortNodePosition(b);
 }
@@ -138,4 +135,4 @@ function shouldBlockAnimation(_a, key) {
     return shouldBlock;
 }
 
-export { animateVisualElement, sortByTreeOrder, stopAnimation };
+export { animateVisualElement, sortByTreeOrder };

package/dist/es/render/utils/setters.mjs

@@ -1,4 +1,4 @@
-import { __rest, __assign, __spreadArray, __read } from 'tslib';
+import { __rest, __assign } from 'tslib';
 import { complex } from 'style-value-types';
 import { isNumericalString } from '../../utils/is-numerical-string.mjs';
 import { isZeroValueString } from '../../utils/is-zero-value-string.mjs';
@@ -29,28 +29,6 @@ function setTarget(visualElement, definition) {
         setMotionValue(visualElement, key, value);
     }
 }
-function setVariants(visualElement, variantLabels) {
-    var reversedLabels = __spreadArray([], __read(variantLabels), false).reverse();
-    reversedLabels.forEach(function (key) {
-        var _a;
-        var variant = visualElement.getVariant(key);
-        variant && setTarget(visualElement, variant);
-        (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach(function (child) {
-            setVariants(child, variantLabels);
-        });
-    });
-}
-function setValues(visualElement, definition) {
-    if (Array.isArray(definition)) {
-        return setVariants(visualElement, definition);
-    }
-    else if (typeof definition === "string") {
-        return setVariants(visualElement, [definition]);
-    }
-    else {
-        setTarget(visualElement, definition);
-    }
-}
 function checkTargetForNewValues(visualElement, target, origin) {
     var _a, _b, _c;
     var _d;
@@ -96,20 +74,5 @@ function checkTargetForNewValues(visualElement, target, origin) {
         visualElement.setBaseTarget(key, value);
     }
 }
-function getOriginFromTransition(key, transition) {
-    if (!transition)
-        return;
-    var valueTransition = transition[key] || transition["default"] || transition;
-    return valueTransition.from;
-}
-function getOrigin(target, transition, visualElement) {
-    var _a, _b;
-    var origin = {};
-    for (var key in target) {
-        origin[key] =
-            (_a = getOriginFromTransition(key, transition)) !== null && _a !== void 0 ? _a : (_b = visualElement.getValue(key)) === null || _b === void 0 ? void 0 : _b.get();
-    }
-    return origin;
-}
 
-export { checkTargetForNewValues, getOrigin, getOriginFromTransition, setTarget, setValues };
+export { checkTargetForNewValues, setTarget };

package/dist/es/three-entry.mjs

@@ -0,0 +1 @@
+export { motion } from './render/three/motion.mjs';

package/dist/es/utils/array.mjs

@@ -1,4 +1,4 @@
-import { __read } from 'tslib';
+import 'tslib';
 
 function addUniqueItem(arr, item) {
     arr.indexOf(item) === -1 && arr.push(item);
@@ -7,16 +7,5 @@ function removeItem(arr, item) {
     var index = arr.indexOf(item);
     index > -1 && arr.splice(index, 1);
 }
-// Adapted from array-move
-function moveItem(_a, fromIndex, toIndex) {
-    var _b = __read(_a), arr = _b.slice(0);
-    var startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
-    if (startIndex >= 0 && startIndex < arr.length) {
-        var endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;
-        var _c = __read(arr.splice(fromIndex, 1), 1), item = _c[0];
-        arr.splice(endIndex, 0, item);
-    }
-    return arr;
-}
 
-export { addUniqueItem, moveItem, removeItem };
+export { addUniqueItem, removeItem };