framer-motion 6.2.6 → 6.2.9-alpha

package/dist/cjs/index.js

@@ -33,6 +33,14 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var sync__default = /*#__PURE__*/_interopDefaultLegacy(sync);
 
+/**
+ * Browser-safe usage of process
+ */
+var mockProcess = { env: { NODE_ENV: "production" } };
+var safeProcess = typeof process === "undefined" ? mockProcess : process;
+// eslint-disable-next-line import/no-default-export
+var process$1 = safeProcess;
+
 var createDefinition = function (propNames) { return ({
     isEnabled: function (props) { return propNames.some(function (name) { return !!props[name]; }); },
 }); };
@@ -94,7 +102,7 @@ function useFeatures(props, visualElement, preloadedFeatures) {
      * If we're in development mode, check to make sure we're not rendering a motion component
      * as a child of LazyMotion, as this will break the file-size benefits of using it.
      */
-    if (process.env.NODE_ENV !== "production" &&
+    if (process$1.env.NODE_ENV !== "production" &&
         preloadedFeatures &&
         lazyContext.strict) {
         heyListen.invariant(false, "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.");
@@ -4316,7 +4324,7 @@ function useMissingIntersectionObserver(shouldObserve, state, visualElement, _a)
     React.useEffect(function () {
         if (!shouldObserve || !fallback)
             return;
-        if (process.env.NODE_ENV !== "production") {
+        if (process$1.env.NODE_ENV !== "production") {
             warnOnce(false, "IntersectionObserver not available on this device. whileInView animations will trigger on mount.");
         }
         /**
@@ -5014,7 +5022,11 @@ function createAnimationState(visualElement) {
         // Propagate active change to children
         (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach(function (child) { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); });
         state[type].isActive = isActive;
-        return animateChanges(options, type);
+        var animations = animateChanges(options, type);
+        for (var key in state) {
+            state[key].protectedKeys = {};
+        }
+        return animations;
     }
     return {
         isAnimated: isAnimated,
@@ -7110,7 +7122,7 @@ var m = createMotionProxy(createDomMotionConfig);
 
 function useIsMounted() {
     var isMounted = React.useRef(false);
-    React.useLayoutEffect(function () {
+    useIsomorphicLayoutEffect(function () {
         isMounted.current = true;
         return function () {
             isMounted.current = false;
@@ -7189,7 +7201,7 @@ function newChildrenMap() {
 }
 
 var getChildKey = function (child) { return child.key || ""; };
-var isDev = process.env.NODE_ENV !== "production";
+var isDev = process$1.env.NODE_ENV !== "production";
 function updateChildLookup(children, allChildren) {
     var seenChildren = isDev ? new Set() : null;
     children.forEach(function (child) {
@@ -7329,7 +7341,7 @@ var AnimatePresence = function (_a) {
         var key = child.key;
         return exiting.has(key) ? (child) : (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout }, child));
     });
-    if (process.env.NODE_ENV !== "production" &&
+    if (process$1.env.NODE_ENV !== "production" &&
         exitBeforeEnter &&
         childrenToRender.length > 1) {
         console.warn("You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.");
@@ -7368,21 +7380,28 @@ function nodeGroup() {
     };
 }
 
+var shouldInheritGroup = function (inherit) { return inherit === true; };
+var shouldInheritId = function (inherit) {
+    return shouldInheritGroup(inherit === true) || inherit === "id";
+};
 var LayoutGroup = function (_a) {
     var _b, _c;
-    var children = _a.children, id = _a.id, _d = _a.inheritId, inheritId = _d === void 0 ? true : _d;
+    var children = _a.children, id = _a.id, inheritId = _a.inheritId, _d = _a.inherit, inherit = _d === void 0 ? true : _d;
+    // Maintain backwards-compatibility with inheritId until 7.0
+    if (inheritId !== undefined)
+        inherit = inheritId;
     var layoutGroupContext = React.useContext(LayoutGroupContext);
     var deprecatedLayoutGroupContext = React.useContext(DeprecatedLayoutGroupContext);
     var _e = tslib.__read(useForceUpdate(), 2), forceRender = _e[0], key = _e[1];
     var context = React.useRef(null);
     var upstreamId = (_b = layoutGroupContext.id) !== null && _b !== void 0 ? _b : deprecatedLayoutGroupContext;
     if (context.current === null) {
-        if (inheritId && upstreamId) {
+        if (shouldInheritId(inherit) && upstreamId) {
             id = id ? upstreamId + "-" + id : upstreamId;
         }
         context.current = {
             id: id,
-            group: inheritId
+            group: shouldInheritGroup(inherit)
                 ? (_c = layoutGroupContext === null || layoutGroupContext === void 0 ? void 0 : layoutGroupContext.group) !== null && _c !== void 0 ? _c : nodeGroup()
                 : nodeGroup(),
         };

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

@@ -1,6 +1,7 @@
 import { __read, __spreadArray } from 'tslib';
 import * as React from 'react';
 import { useContext, useRef, cloneElement, Children, isValidElement } from 'react';
+import process from '../../utils/process.mjs';
 import { useForceUpdate } from '../../utils/use-force-update.mjs';
 import { useIsMounted } from '../../utils/use-is-mounted.mjs';
 import { PresenceChild } from './PresenceChild.mjs';

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

@@ -6,21 +6,28 @@ import { DeprecatedLayoutGroupContext } from '../../context/DeprecatedLayoutGrou
 import { useForceUpdate } from '../../utils/use-force-update.mjs';
 import { nodeGroup } from '../../projection/node/group.mjs';
 
+var shouldInheritGroup = function (inherit) { return inherit === true; };
+var shouldInheritId = function (inherit) {
+    return shouldInheritGroup(inherit === true) || inherit === "id";
+};
 var LayoutGroup = function (_a) {
     var _b, _c;
-    var children = _a.children, id = _a.id, _d = _a.inheritId, inheritId = _d === void 0 ? true : _d;
+    var children = _a.children, id = _a.id, inheritId = _a.inheritId, _d = _a.inherit, inherit = _d === void 0 ? true : _d;
+    // Maintain backwards-compatibility with inheritId until 7.0
+    if (inheritId !== undefined)
+        inherit = inheritId;
     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) {
+        if (shouldInheritId(inherit) && upstreamId) {
             id = id ? upstreamId + "-" + id : upstreamId;
         }
         context.current = {
             id: id,
-            group: inheritId
+            group: shouldInheritGroup(inherit)
                 ? (_c = layoutGroupContext === null || layoutGroupContext === void 0 ? void 0 : layoutGroupContext.group) !== null && _c !== void 0 ? _c : nodeGroup()
                 : nodeGroup(),
         };

package/dist/es/motion/features/use-features.mjs

@@ -1,6 +1,7 @@
 import { __assign } from 'tslib';
 import * as React from 'react';
 import { useContext } from 'react';
+import process from '../../utils/process.mjs';
 import { featureDefinitions } from './definitions.mjs';
 import { invariant } from 'hey-listen';
 import { LazyContext } from '../../context/LazyContext.mjs';

package/dist/es/motion/features/viewport/use-viewport.mjs

@@ -1,3 +1,4 @@
+import process from '../../../utils/process.mjs';
 import { useRef, useEffect } from 'react';
 import { AnimationType } from '../../../render/utils/types.mjs';
 import { warnOnce } from '../../../utils/warn-once.mjs';

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

@@ -294,7 +294,11 @@ function createAnimationState(visualElement) {
         // Propagate active change to children
         (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach(function (child) { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); });
         state[type].isActive = isActive;
-        return animateChanges(options, type);
+        var animations = animateChanges(options, type);
+        for (var key in state) {
+            state[key].protectedKeys = {};
+        }
+        return animations;
     }
     return {
         isAnimated: isAnimated,

package/dist/es/utils/process.mjs

@@ -0,0 +1,9 @@
+/**
+ * Browser-safe usage of process
+ */
+var mockProcess = { env: { NODE_ENV: "production" } };
+var safeProcess = typeof process === "undefined" ? mockProcess : process;
+// eslint-disable-next-line import/no-default-export
+var process$1 = safeProcess;
+
+export { process$1 as default };

package/dist/es/utils/use-is-mounted.mjs

@@ -1,8 +1,9 @@
-import { useRef, useLayoutEffect } from 'react';
+import { useRef } from 'react';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-effect.mjs';
 
 function useIsMounted() {
     var isMounted = useRef(false);
-    useLayoutEffect(function () {
+    useIsomorphicLayoutEffect(function () {
         isMounted.current = true;
         return function () {
             isMounted.current = false;

package/dist/framer-motion.dev.js

@@ -6247,7 +6247,11 @@
             // Propagate active change to children
             (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach(function (child) { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); });
             state[type].isActive = isActive;
-            return animateChanges(options, type);
+            var animations = animateChanges(options, type);
+            for (var key in state) {
+                state[key].protectedKeys = {};
+            }
+            return animations;
         }
         return {
             isAnimated: isAnimated,
@@ -8343,7 +8347,7 @@
 
     function useIsMounted() {
         var isMounted = React.useRef(false);
-        React.useLayoutEffect(function () {
+        useIsomorphicLayoutEffect(function () {
             isMounted.current = true;
             return function () {
                 isMounted.current = false;
@@ -8599,21 +8603,28 @@
         };
     }
 
+    var shouldInheritGroup = function (inherit) { return inherit === true; };
+    var shouldInheritId = function (inherit) {
+        return shouldInheritGroup(inherit === true) || inherit === "id";
+    };
     var LayoutGroup = function (_a) {
         var _b, _c;
-        var children = _a.children, id = _a.id, _d = _a.inheritId, inheritId = _d === void 0 ? true : _d;
+        var children = _a.children, id = _a.id, inheritId = _a.inheritId, _d = _a.inherit, inherit = _d === void 0 ? true : _d;
+        // Maintain backwards-compatibility with inheritId until 7.0
+        if (inheritId !== undefined)
+            inherit = inheritId;
         var layoutGroupContext = React.useContext(LayoutGroupContext);
         var deprecatedLayoutGroupContext = React.useContext(DeprecatedLayoutGroupContext);
         var _e = __read(useForceUpdate(), 2), forceRender = _e[0], key = _e[1];
         var context = React.useRef(null);
         var upstreamId = (_b = layoutGroupContext.id) !== null && _b !== void 0 ? _b : deprecatedLayoutGroupContext;
         if (context.current === null) {
-            if (inheritId && upstreamId) {
+            if (shouldInheritId(inherit) && upstreamId) {
                 id = id ? upstreamId + "-" + id : upstreamId;
             }
             context.current = {
                 id: id,
-                group: inheritId
+                group: shouldInheritGroup(inherit)
                     ? (_c = layoutGroupContext === null || layoutGroupContext === void 0 ? void 0 : layoutGroupContext.group) !== null && _c !== void 0 ? _c : nodeGroup()
                     : nodeGroup(),
             };