framer-motion 5.0.0-beta.4 → 5.0.0-beta.43

package/dist/es/animation/{animate.js → animate.mjs}

@@ -1,6 +1,6 @@
-import { motionValue } from '../value/index.js';
-import { isMotionValue } from '../value/utils/is-motion-value.js';
-import { startAnimation } from './utils/transitions.js';
+import { motionValue } from '../value/index.mjs';
+import { isMotionValue } from '../value/utils/is-motion-value.mjs';
+import { startAnimation } from './utils/transitions.mjs';
 
 /**
  * Animate a single value or a `MotionValue`.

package/dist/es/animation/{animation-controls.js → animation-controls.mjs}

@@ -1,7 +1,7 @@
 import { __spreadArray, __read } from 'tslib';
 import { invariant } from 'hey-listen';
-import { stopAnimation, animateVisualElement } from '../render/utils/animation.js';
-import { setValues } from '../render/utils/setters.js';
+import { stopAnimation, animateVisualElement } from '../render/utils/animation.mjs';
+import { setValues } from '../render/utils/setters.mjs';
 
 /**
  * @public
@@ -65,7 +65,7 @@ function animationControls() {
             hasMounted = true;
             pendingAnimations.forEach(function (_a) {
                 var animation = _a.animation, resolve = _a.resolve;
-                controls.start.apply(controls, __spreadArray([], __read(animation))).then(resolve);
+                controls.start.apply(controls, __spreadArray([], __read(animation), false)).then(resolve);
             });
             return function () {
                 hasMounted = false;

package/dist/es/animation/{use-animated-state.js → use-animated-state.mjs}

@@ -1,11 +1,11 @@
 import { __rest, __assign, __read } from 'tslib';
 import { useState, useEffect } from 'react';
-import { useConstant } from '../utils/use-constant.js';
-import { getOrigin, checkTargetForNewValues } from '../render/utils/setters.js';
-import { visualElement } from '../render/index.js';
-import { animateVisualElement } from '../render/utils/animation.js';
-import { makeUseVisualState } from '../motion/utils/use-visual-state.js';
-import { createBox } from '../projection/geometry/models.js';
+import { useConstant } from '../utils/use-constant.mjs';
+import { getOrigin, checkTargetForNewValues } from '../render/utils/setters.mjs';
+import { visualElement } from '../render/index.mjs';
+import { animateVisualElement } from '../render/utils/animation.mjs';
+import { makeUseVisualState } from '../motion/utils/use-visual-state.mjs';
+import { createBox } from '../projection/geometry/models.mjs';
 
 var createObject = function () { return ({}); };
 var stateVisualElement = visualElement({

package/dist/es/animation/{use-animation.js → use-animation.mjs}

@@ -1,6 +1,6 @@
-import { animationControls } from './animation-controls.js';
+import { animationControls } from './animation-controls.mjs';
 import { useEffect } from 'react';
-import { useConstant } from '../utils/use-constant.js';
+import { useConstant } from '../utils/use-constant.mjs';
 
 /**
  * Creates `AnimationControls`, which can be used to manually start, stop
@@ -11,26 +11,6 @@ import { useConstant } from '../utils/use-constant.js';
  *
  * These components can then be animated with the `start` method.
  *
- * @library
- *
- * ```jsx
- * import * as React from 'react'
- * import { Frame, useAnimation } from 'framer'
- *
- * export function MyComponent(props) {
- *    const controls = useAnimation()
- *
- *    controls.start({
- *        x: 100,
- *        transition: { duration: 0.5 },
- *    })
- *
- *    return <Frame animate={controls} />
- * }
- * ```
- *
- * @motion
- *
  * ```jsx
  * import * as React from 'react'
  * import { motion, useAnimation } from 'framer-motion'

package/dist/es/animation/utils/{default-transitions.js → default-transitions.mjs}

@@ -1,5 +1,5 @@
 import { __assign } from 'tslib';
-import { isKeyframesTarget } from './is-keyframes-target.js';
+import { isKeyframesTarget } from './is-keyframes-target.mjs';
 
 var underDampedSpring = function () { return ({
     type: "spring",

package/dist/es/animation/utils/{transitions.js → transitions.mjs}

@@ -1,11 +1,11 @@
 import { __assign, __rest, __spreadArray, __read } from 'tslib';
 import { inertia, animate } from 'popmotion';
-import { secondsToMilliseconds } from '../../utils/time-conversion.js';
-import { isEasingArray, easingDefinitionToFunction } from './easing.js';
-import { isAnimatable } from './is-animatable.js';
-import { getDefaultTransition } from './default-transitions.js';
+import { secondsToMilliseconds } from '../../utils/time-conversion.mjs';
+import { isEasingArray, easingDefinitionToFunction } from './easing.mjs';
+import { isAnimatable } from './is-animatable.mjs';
+import { getDefaultTransition } from './default-transitions.mjs';
 import { warning } from 'hey-listen';
-import { getAnimatableNone } from '../../render/dom/value-types/animatable-none.js';
+import { getAnimatableNone } from '../../render/dom/value-types/animatable-none.mjs';
 
 /**
  * Decide whether a transition is defined on a given Transition.
@@ -81,7 +81,7 @@ function getDelayFromTransition(transition, key) {
 }
 function hydrateKeyframes(options) {
     if (Array.isArray(options.to) && options.to[0] === null) {
-        options.to = __spreadArray([], __read(options.to));
+        options.to = __spreadArray([], __read(options.to), false);
         options.to[0] = options.from;
     }
     return options;

package/dist/es/components/AnimatePresence/{PresenceChild.js → PresenceChild.mjs}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import { PresenceContext } from '../../context/PresenceContext.js';
-import { useConstant } from '../../utils/use-constant.js';
+import { PresenceContext } from '../../context/PresenceContext.mjs';
+import { useConstant } from '../../utils/use-constant.mjs';
 
 var presenceId = 0;
 function getPresenceId() {

package/dist/es/components/AnimatePresence/{index.js → index.mjs}

@@ -1,9 +1,9 @@
 import { __read, __spreadArray } from 'tslib';
 import * as React from 'react';
 import { useContext, useRef, cloneElement, Children, isValidElement } from 'react';
-import { useForceUpdate } from '../../utils/use-force-update.js';
-import { PresenceChild } from './PresenceChild.js';
-import { LayoutGroupContext } from '../../context/LayoutGroupContext.js';
+import { useForceUpdate } from '../../utils/use-force-update.mjs';
+import { PresenceChild } from './PresenceChild.mjs';
+import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
 
 function getChildKey(child) {
     return child.key || "";
@@ -35,35 +35,6 @@ function onlyElements(children) {
  *
  * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
  *
- * @library
- *
- * Any `Frame` components that have an `exit` property defined will animate out when removed from
- * the tree.
- *
- * ```jsx
- * import { Frame, AnimatePresence } from 'framer'
- *
- * // As items are added and removed from `items`
- * export function Items({ items }) {
- *   return (
- *     <AnimatePresence>
- *       {items.map(item => (
- *         <Frame
- *           key={item.id}
- *           initial={{ opacity: 0 }}
- *           animate={{ opacity: 1 }}
- *           exit={{ opacity: 0 }}
- *         />
- *       ))}
- *     </AnimatePresence>
- *   )
- * }
- * ```
- *
- * You can sequence exit animations throughout a tree using variants.
- *
- * @motion
- *
  * Any `motion` components that have an `exit` property defined will animate out when removed from
  * the tree.
  *
@@ -107,8 +78,7 @@ var AnimatePresence = function (_a) {
     // can diff to figure out which are entering and exiting
     var presentChildren = useRef(filteredChildren);
     // A lookup table to quickly reference components by key
-    var allChildren = useRef(new Map())
-        .current;
+    var allChildren = useRef(new Map()).current;
     // A living record of all currently exiting components.
     var exiting = useRef(new Set()).current;
     updateChildLookup(filteredChildren, allChildren);
@@ -119,7 +89,7 @@ var AnimatePresence = function (_a) {
         return (React.createElement(React.Fragment, null, filteredChildren.map(function (child) { return (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout }, child)); })));
     }
     // If this is a subsequent render, deal with entering and exiting children
-    var childrenToRender = __spreadArray([], __read(filteredChildren));
+    var childrenToRender = __spreadArray([], __read(filteredChildren), false);
     // Diff the keys of the currently-present and target children to update our
     // exiting list.
     var presentKeys = presentChildren.current.map(getChildKey);

package/dist/es/components/AnimatePresence/{use-presence.js → use-presence.mjs}

@@ -1,6 +1,6 @@
 import { useContext, useEffect } from 'react';
-import { PresenceContext } from '../../context/PresenceContext.js';
-import { useConstant } from '../../utils/use-constant.js';
+import { PresenceContext } from '../../context/PresenceContext.mjs';
+import { useConstant } from '../../utils/use-constant.mjs';
 
 /**
  * When a component is the child of `AnimatePresence`, it can use `usePresence`

package/dist/es/components/AnimateSharedLayout.mjs

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { useConstant } from '../utils/use-constant.mjs';
+import { LayoutGroup } from './LayoutGroup/index.mjs';
+
+var id = 0;
+var AnimateSharedLayout = function (_a) {
+    var children = _a.children;
+    return (React.createElement(LayoutGroup, { id: useConstant(function () { return "asl-" + id++; }) }, children));
+};
+
+export { AnimateSharedLayout };

package/dist/es/components/LayoutGroup/index.mjs

@@ -0,0 +1,32 @@
+import { __read, __assign } from 'tslib';
+import * as React from 'react';
+import { useContext, useRef, useMemo } from 'react';
+import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
+import { DeprecatedLayoutGroupContext } from '../../context/DeprecatedLayoutGroupContext.mjs';
+import { useForceUpdate } from '../../utils/use-force-update.mjs';
+import { nodeGroup } from '../../projection/node/group.mjs';
+
+var LayoutGroup = function (_a) {
+    var _b, _c;
+    var children = _a.children, id = _a.id, _d = _a.inheritId, inheritId = _d === void 0 ? true : _d;
+    var layoutGroupContext = useContext(LayoutGroupContext);
+    var deprecatedLayoutGroupContext = useContext(DeprecatedLayoutGroupContext);
+    var _e = __read(useForceUpdate(), 2), forceRender = _e[0], key = _e[1];
+    var context = useRef(null);
+    var upstreamId = (_b = layoutGroupContext.id) !== null && _b !== void 0 ? _b : deprecatedLayoutGroupContext;
+    if (context.current === null) {
+        if (inheritId && upstreamId) {
+            id = id ? upstreamId + "-" + id : upstreamId;
+        }
+        context.current = {
+            id: id,
+            group: inheritId
+                ? (_c = layoutGroupContext === null || layoutGroupContext === void 0 ? void 0 : layoutGroupContext.group) !== null && _c !== void 0 ? _c : nodeGroup()
+                : nodeGroup(),
+        };
+    }
+    var memoizedContext = useMemo(function () { return (__assign(__assign({}, context.current), { forceRender: forceRender })); }, [key]);
+    return (React.createElement(LayoutGroupContext.Provider, { value: memoizedContext }, children));
+};
+
+export { LayoutGroup };

package/dist/es/components/LazyMotion/{index.js → index.mjs}

@@ -1,8 +1,8 @@
 import { __read, __rest } from 'tslib';
 import * as React from 'react';
 import { useState, useRef, useEffect } from 'react';
-import { LazyContext } from '../../context/LazyContext.js';
-import { loadFeatures } from '../../motion/features/definitions.js';
+import { LazyContext } from '../../context/LazyContext.mjs';
+import { loadFeatures } from '../../motion/features/definitions.mjs';
 
 /**
  * Used in conjunction with the `m` component to reduce bundle size.

package/dist/es/components/MotionConfig/{index.js → index.mjs}

@@ -1,8 +1,8 @@
 import { __rest, __assign } from 'tslib';
 import * as React from 'react';
 import { useContext, useMemo } from 'react';
-import { MotionConfigContext } from '../../context/MotionConfigContext.js';
-import { useConstant } from '../../utils/use-constant.js';
+import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
+import { useConstant } from '../../utils/use-constant.mjs';
 
 /**
  * `MotionConfig` is used to set configuration options for all children `motion` components.

package/dist/es/components/Reorder/Group.mjs

@@ -0,0 +1,46 @@
+import { __rest, __assign } from 'tslib';
+import * as React from 'react';
+import { forwardRef, useRef, useEffect } from 'react';
+import { ReorderContext } from '../../context/ReorderContext.mjs';
+import { motion } from '../../render/dom/motion.mjs';
+import { useConstant } from '../../utils/use-constant.mjs';
+import { checkReorder } from './utils/check-reorder.mjs';
+
+function ReorderGroup(_a, externalRef) {
+    var children = _a.children, _b = _a.as, as = _b === void 0 ? "ul" : _b, _c = _a.axis, axis = _c === void 0 ? "y" : _c, onReorder = _a.onReorder, props = __rest(_a, ["children", "as", "axis", "onReorder"]);
+    var Component = useConstant(function () { return motion(as); });
+    var order = [];
+    var isReordering = useRef(false);
+    var context = {
+        axis: axis,
+        registerItem: function (value, layout) {
+            /**
+             * Ensure entries can't add themselves more than once
+             */
+            if (layout &&
+                order.findIndex(function (entry) { return value === entry.value; }) === -1) {
+                order.push({ value: value, layout: layout[axis] });
+            }
+        },
+        updateOrder: function (id, offset, velocity) {
+            if (isReordering.current)
+                return;
+            var newOrder = checkReorder(order, id, offset, velocity);
+            if (order !== newOrder) {
+                isReordering.current = true;
+                onReorder(newOrder.map(getValue));
+            }
+        },
+    };
+    useEffect(function () {
+        isReordering.current = false;
+    });
+    return (React.createElement(Component, __assign({}, props, { ref: externalRef }),
+        React.createElement(ReorderContext.Provider, { value: context }, children)));
+}
+var Group = forwardRef(ReorderGroup);
+function getValue(item) {
+    return item.value;
+}
+
+export { Group, ReorderGroup };

package/dist/es/components/Reorder/Item.mjs

@@ -0,0 +1,42 @@
+import { __rest, __read, __assign } from 'tslib';
+import { invariant } from 'hey-listen';
+import * as React from 'react';
+import { forwardRef, useContext, useRef, useEffect } from 'react';
+import { ReorderContext } from '../../context/ReorderContext.mjs';
+import { motion } from '../../render/dom/motion.mjs';
+import { useConstant } from '../../utils/use-constant.mjs';
+import { useMotionValue } from '../../value/use-motion-value.mjs';
+import { useTransform } from '../../value/use-transform.mjs';
+import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
+
+function useDefaultMotionValue(value, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = 0; }
+    return isMotionValue(value) ? value : useMotionValue(defaultValue);
+}
+function ReorderItem(_a, externalRef) {
+    var children = _a.children, style = _a.style, value = _a.value, _b = _a.as, as = _b === void 0 ? "li" : _b, props = __rest(_a, ["children", "style", "value", "as"]);
+    var Component = useConstant(function () { return motion(as); });
+    var context = useContext(ReorderContext);
+    var point = {
+        x: useDefaultMotionValue(style === null || style === void 0 ? void 0 : style.x),
+        y: useDefaultMotionValue(style === null || style === void 0 ? void 0 : style.y),
+    };
+    var zIndex = useTransform([point.x, point.y], function (_a) {
+        var _b = __read(_a, 2), latestX = _b[0], latestY = _b[1];
+        return latestX || latestY ? 1 : 0;
+    });
+    var layout = useRef(null);
+    invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
+    var _c = context, axis = _c.axis, registerItem = _c.registerItem, updateOrder = _c.updateOrder;
+    useEffect(function () {
+        registerItem(value, layout.current);
+    }, [context]);
+    return (React.createElement(Component, __assign({ drag: axis }, props, { dragSnapToOrigin: true, style: __assign(__assign({}, style), { x: point.x, y: point.y, zIndex: zIndex }), layout: true, onDrag: function (_event, _a) {
+            var velocity = _a.velocity;
+            velocity[axis] &&
+                updateOrder(value, point[axis].get(), velocity[axis]);
+        }, onLayoutMeasure: function (measured) { return (layout.current = measured); }, ref: externalRef }), children));
+}
+var Item = forwardRef(ReorderItem);
+
+export { Item, ReorderItem };

package/dist/es/components/Reorder/index.mjs

@@ -0,0 +1,9 @@
+import { Group } from './Group.mjs';
+import { Item } from './Item.mjs';
+
+var Reorder = {
+    Group: Group,
+    Item: Item,
+};
+
+export { Reorder };

package/dist/es/components/Reorder/utils/check-reorder.mjs

@@ -0,0 +1,24 @@
+import { mix } from 'popmotion';
+import { moveItem } from '../../../utils/array.mjs';
+
+function checkReorder(order, value, offset, velocity) {
+    if (!velocity)
+        return order;
+    var index = order.findIndex(function (item) { return item.value === value; });
+    if (index === -1)
+        return order;
+    var nextOffset = velocity > 0 ? 1 : -1;
+    var nextItem = order[index + nextOffset];
+    if (!nextItem)
+        return order;
+    var item = order[index];
+    var nextLayout = nextItem.layout;
+    var nextItemCenter = mix(nextLayout.min, nextLayout.max, 0.5);
+    if ((nextOffset === 1 && item.layout.max + offset > nextItemCenter) ||
+        (nextOffset === -1 && item.layout.min + offset < nextItemCenter)) {
+        return moveItem(order, index, index + nextOffset);
+    }
+    return order;
+}
+
+export { checkReorder };

package/dist/es/context/DeprecatedLayoutGroupContext.mjs

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+/**
+ * @internal
+ * @deprecated
+ */
+var DeprecatedLayoutGroupContext = createContext(null);
+
+export { DeprecatedLayoutGroupContext };

package/dist/es/context/MotionContext/{create.js → create.mjs}

@@ -1,6 +1,6 @@
 import { useMemo, useContext } from 'react';
-import { MotionContext } from './index.js';
-import { getCurrentTreeVariants } from './utils.js';
+import { MotionContext } from './index.mjs';
+import { getCurrentTreeVariants } from './utils.mjs';
 
 function useCreateMotionContext(props, isStatic) {
     var _a = getCurrentTreeVariants(props, useContext(MotionContext)), initial = _a.initial, animate = _a.animate;

package/dist/es/context/MotionContext/{utils.js → utils.mjs}

@@ -1,4 +1,4 @@
-import { checkIfControllingVariants, isVariantLabel } from '../../render/utils/variants.js';
+import { checkIfControllingVariants, isVariantLabel } from '../../render/utils/variants.mjs';
 
 function getCurrentTreeVariants(props, context) {
     if (checkIfControllingVariants(props)) {

package/dist/es/context/ReorderContext.mjs

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+var ReorderContext = createContext(null);
+
+export { ReorderContext };

package/dist/es/context/SwitchLayoutGroupContext.mjs

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+/**
+ * @internal
+ */
+var SwitchLayoutGroupContext = createContext({});
+
+export { SwitchLayoutGroupContext };

package/dist/es/events/{event-info.js → event-info.mjs}

@@ -1,4 +1,4 @@
-import { isTouchEvent } from '../gestures/utils/event-type.js';
+import { isTouchEvent } from '../gestures/utils/event-type.mjs';
 
 /**
  * Filters out events not attached to the primary pointer (currently left mouse button)

package/dist/es/events/{use-pointer-event.js → use-pointer-event.mjs}

@@ -1,6 +1,6 @@
-import { useDomEvent, addDomEvent } from './use-dom-event.js';
-import { wrapHandler } from './event-info.js';
-import { supportsPointerEvents, supportsTouchEvents, supportsMouseEvents } from './utils.js';
+import { useDomEvent, addDomEvent } from './use-dom-event.mjs';
+import { wrapHandler } from './event-info.mjs';
+import { supportsPointerEvents, supportsTouchEvents, supportsMouseEvents } from './utils.mjs';
 
 var mouseEventNames = {
     pointerdown: "mousedown",

package/dist/es/events/{utils.js → utils.mjs}

@@ -1,4 +1,4 @@
-import { isBrowser } from '../utils/is-browser.js';
+import { isBrowser } from '../utils/is-browser.mjs';
 
 // We check for event support via functions in case they've been mocked by a testing suite.
 var supportsPointerEvents = function () {

package/dist/es/gestures/{PanSession.js → PanSession.mjs}

@@ -1,9 +1,9 @@
 import { __assign } from 'tslib';
-import { isMouseEvent, isTouchEvent } from './utils/event-type.js';
-import { extractEventInfo } from '../events/event-info.js';
+import { isMouseEvent, isTouchEvent } from './utils/event-type.mjs';
+import { extractEventInfo } from '../events/event-info.mjs';
 import sync, { getFrameData, cancelSync } from 'framesync';
-import { secondsToMilliseconds } from '../utils/time-conversion.js';
-import { addPointerEvent } from '../events/use-pointer-event.js';
+import { secondsToMilliseconds } from '../utils/time-conversion.mjs';
+import { addPointerEvent } from '../events/use-pointer-event.mjs';
 import { distance, pipe } from 'popmotion';
 
 /**