framer-motion 5.4.1 → 5.4.4

package/dist/cjs/three-entry.js

@@ -0,0 +1,362 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var useMotionValue = require('./use-motion-value-73ed7c77.js');
+var React = require('react');
+var popmotion = require('popmotion');
+var three = require('three');
+var mergeRefs = require('react-merge-refs');
+var useMeasure = require('react-use-measure');
+var fiber = require('@react-three/fiber');
+require('hey-listen');
+require('framesync');
+require('style-value-types');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
+var useMeasure__default = /*#__PURE__*/_interopDefaultLegacy(useMeasure);
+
+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(useMotionValue.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(useMotionValue.AnimationType.Hover, false);
+            onPointerOut === null || onPointerOut === void 0 ? void 0 : onPointerOut(event);
+        },
+    };
+}
+
+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 = React.useRef(false);
+    var cancelPointerEndListeners = React.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(useMotionValue.AnimationType.Tap, false);
+        return !useMotionValue.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: useMotionValue.wrapHandler(function (event, info) {
+            var _a;
+            removePointerEndListener();
+            if (isPressing.current)
+                return;
+            isPressing.current = true;
+            cancelPointerEndListeners.current = popmotion.pipe(useMotionValue.addPointerEvent(window, "pointerup", onPointerUp), useMotionValue.addPointerEvent(window, "pointercancel", onPointerCancel));
+            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(useMotionValue.AnimationType.Tap, true);
+            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+            onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info);
+        }, true),
+    };
+}
+
+var useRender = function (Component, props, _projectionId, ref, _state, isStatic, visualElement) {
+    return React.createElement(Component, tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({ ref: ref }, useMotionValue.filterProps(props, false, false)), { onUpdate: props.onInstanceUpdate }), useHover(isStatic, props, visualElement)), useTap(isStatic, props, visualElement)));
+};
+
+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 three.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 three.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 three.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 three.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];
+    }
+}
+
+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 three.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;
+}
+
+var axes = ["x", "y", "z"];
+var valueMap = {
+    "position-x": "x",
+    "position-y": "y",
+    "position-z": "z",
+    "rotation-x": "rotateX",
+    "rotation-y": "rotateY",
+    "rotation-z": "rotateZ",
+    "scale-x": "scaleX",
+    "scale-y": "scaleY",
+    "scale-z": "scaleZ",
+};
+var scrapeMotionValuesFromProps = function (props) {
+    var motionValues = {};
+    for (var key in props) {
+        var prop = props[key];
+        if (useMotionValue.isMotionValue(prop)) {
+            motionValues[valueMap[key] || key] = prop;
+        }
+        else if (Array.isArray(prop)) {
+            for (var i = 0; i < prop.length; i++) {
+                var value = prop[i];
+                if (useMotionValue.isMotionValue(value)) {
+                    var name_1 = valueMap[key + "-" + axes[i]];
+                    motionValues[name_1] = value;
+                }
+            }
+        }
+    }
+    return motionValues;
+};
+
+var createRenderState = function () { return ({}); };
+var threeVisualElement = useMotionValue.visualElement({
+    treeType: "three",
+    readValueFromInstance: readThreeValue,
+    getBaseTarget: function () {
+        return undefined;
+    },
+    sortNodePosition: function (a, b) {
+        return a.id - b.id;
+    },
+    makeTargetAnimatable: function (element, target) {
+        useMotionValue.checkTargetForNewValues(element, target, {});
+        return target;
+    },
+    restoreTransform: function () { },
+    resetTransform: function () { },
+    removeValueFromRenderState: function (_key, _renderState) { },
+    measureViewportBox: useMotionValue.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);
+};
+
+var useVisualState = useMotionValue.makeUseVisualState({
+    scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
+    createRenderState: createRenderState,
+});
+var preloadedFeatures = tslib.__assign({}, useMotionValue.animations);
+function custom(Component) {
+    return useMotionValue.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);
+    },
+});
+
+function Block(_a) {
+    var set = _a.set;
+    useMotionValue.useIsomorphicLayoutEffect(function () {
+        set(new Promise(function () { return null; }));
+        return function () { return set(false); };
+    }, []);
+    return null;
+}
+var ErrorBoundary = /** @class */ (function (_super) {
+    tslib.__extends(ErrorBoundary, _super);
+    function ErrorBoundary() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { error: false };
+        return _this;
+    }
+    ErrorBoundary.prototype.componentDidCatch = function (error) {
+        this.props.set(error);
+    };
+    ErrorBoundary.prototype.render = function () {
+        return this.state.error ? null : this.props.children;
+    };
+    ErrorBoundary.getDerivedStateFromError = function () { return ({ error: true }); };
+    return ErrorBoundary;
+}(React__namespace.Component));
+/**
+ * A synchronously rendering version of R3F's Canvas component. We call render
+ * within the render function itself to ensure lifecycle events are called before
+ * parent reconcilers. This can be replaced with a simple MotionContext provider
+ * when R3F moves to the same model.
+ */
+function SyncCanvasComponent(_a, forwardedRef) {
+    var children = _a.children, fallback = _a.fallback, tabIndex = _a.tabIndex, resize = _a.resize, id = _a.id, style = _a.style, className = _a.className, events = _a.events, props = tslib.__rest(_a, ["children", "fallback", "tabIndex", "resize", "id", "style", "className", "events"]);
+    var motionContext = React.useContext(useMotionValue.MotionContext);
+    var _b = tslib.__read(useMeasure__default["default"](tslib.__assign({ scroll: true, debounce: { scroll: 50, resize: 0 } }, resize)), 2), containerRef = _b[0], _c = _b[1], width = _c.width, height = _c.height;
+    var canvasRef = React__namespace.useRef(null);
+    var _d = tslib.__read(React__namespace.useState(false), 2), block = _d[0], setBlock = _d[1];
+    var _e = tslib.__read(React__namespace.useState(false), 2), error = _e[0], setError = _e[1];
+    // Suspend this component if block is a promise (2nd run)
+    if (block)
+        throw block;
+    // Throw exception outwards if anything within canvas throws
+    if (error)
+        throw error;
+    // Execute JSX in the reconciler as a layout-effect
+    if (width > 0 && height > 0) {
+        fiber.render(React__namespace.createElement(ErrorBoundary, { set: setError },
+            React__namespace.createElement(React__namespace.Suspense, { fallback: React__namespace.createElement(Block, { set: setBlock }) },
+                React__namespace.createElement(useMotionValue.MotionContext.Provider, { value: motionContext }, children))), canvasRef.current, tslib.__assign(tslib.__assign({}, props), { size: { width: width, height: height }, events: events || fiber.events }));
+    }
+    useMotionValue.useIsomorphicLayoutEffect(function () {
+        var container = canvasRef.current;
+        return function () { return fiber.unmountComponentAtNode(container); };
+    }, []);
+    return (React__namespace.createElement("div", { ref: containerRef, id: id, className: className, tabIndex: tabIndex, style: tslib.__assign({ position: "relative", width: "100%", height: "100%", overflow: "hidden" }, style) },
+        React__namespace.createElement("canvas", { ref: mergeRefs__default["default"]([canvasRef, forwardedRef]), style: { display: "block" } }, fallback)));
+}
+var MotionCanvas = React.forwardRef(SyncCanvasComponent);
+
+function useTime() {
+    var time = useMotionValue.useMotionValue(0);
+    fiber.useFrame(function (state) { return time.set(state.clock.getElapsedTime()); });
+    return time;
+}
+
+exports.MotionCanvas = MotionCanvas;
+exports.motion = motion;
+exports.useTime = useTime;