framer-motion 7.0.3 → 7.1.2

package/dist/es/gestures/drag/utils/constraints.mjs

@@ -1,4 +1,3 @@
-import { __read } from 'tslib';
 import { mix, progress, clamp } from 'popmotion';
 import { calcLength } from '../../../projection/geometry/delta-calc.mjs';
 
@@ -7,8 +6,7 @@ import { calcLength } from '../../../projection/geometry/delta-calc.mjs';
  * axis, and an elastic factor that determines how much to constrain the point
  * by if it does lie outside the defined parameters.
  */
-function applyConstraints(point, _a, elastic) {
-    var min = _a.min, max = _a.max;
+function applyConstraints(point, { min, max }, elastic) {
     if (min !== undefined && point < min) {
         // If we have a min point defined, and this is outside of that, constrain
         point = elastic ? mix(min, point, elastic.min) : Math.max(point, min);
@@ -36,8 +34,7 @@ function calcRelativeAxisConstraints(axis, min, max) {
  * Calculate constraints in terms of the viewport when
  * defined relatively to the measured bounding box.
  */
-function calcRelativeConstraints(layoutBox, _a) {
-    var top = _a.top, left = _a.left, bottom = _a.bottom, right = _a.right;
+function calcRelativeConstraints(layoutBox, { top, left, bottom, right }) {
     return {
         x: calcRelativeAxisConstraints(layoutBox.x, left, right),
         y: calcRelativeAxisConstraints(layoutBox.y, top, bottom),
@@ -47,16 +44,15 @@ function calcRelativeConstraints(layoutBox, _a) {
  * Calculate viewport constraints when defined as another viewport-relative axis
  */
 function calcViewportAxisConstraints(layoutAxis, constraintsAxis) {
-    var _a;
-    var min = constraintsAxis.min - layoutAxis.min;
-    var max = constraintsAxis.max - layoutAxis.max;
+    let min = constraintsAxis.min - layoutAxis.min;
+    let max = constraintsAxis.max - layoutAxis.max;
     // If the constraints axis is actually smaller than the layout axis then we can
     // flip the constraints
     if (constraintsAxis.max - constraintsAxis.min <
         layoutAxis.max - layoutAxis.min) {
-        _a = __read([max, min], 2), min = _a[0], max = _a[1];
+        [min, max] = [max, min];
     }
-    return { min: min, max: max };
+    return { min, max };
 }
 /**
  * Calculate viewport constraints when defined as another viewport-relative box
@@ -72,9 +68,9 @@ function calcViewportConstraints(layoutBox, constraintsBox) {
  * in an asthetically pleasing scale/transform needed to project from source to target.
  */
 function calcOrigin(source, target) {
-    var origin = 0.5;
-    var sourceLength = calcLength(source);
-    var targetLength = calcLength(target);
+    let origin = 0.5;
+    const sourceLength = calcLength(source);
+    const targetLength = calcLength(target);
     if (targetLength > sourceLength) {
         origin = progress(target.min, target.max - sourceLength, source.min);
     }
@@ -87,7 +83,7 @@ function calcOrigin(source, target) {
  * Rebase the calculated viewport constraints relative to the layout.min point.
  */
 function rebaseAxisConstraints(layout, constraints) {
-    var relativeConstraints = {};
+    const relativeConstraints = {};
     if (constraints.min !== undefined) {
         relativeConstraints.min = constraints.min - layout.min;
     }
@@ -96,12 +92,11 @@ function rebaseAxisConstraints(layout, constraints) {
     }
     return relativeConstraints;
 }
-var defaultElastic = 0.35;
+const defaultElastic = 0.35;
 /**
  * Accepts a dragElastic prop and returns resolved elastic values for each axis.
  */
-function resolveDragElastic(dragElastic) {
-    if (dragElastic === void 0) { dragElastic = defaultElastic; }
+function resolveDragElastic(dragElastic = defaultElastic) {
     if (dragElastic === false) {
         dragElastic = 0;
     }

package/dist/es/gestures/drag/utils/lock.mjs

@@ -1,7 +1,7 @@
 function createLock(name) {
-    var lock = null;
-    return function () {
-        var openLock = function () {
+    let lock = null;
+    return () => {
+        const openLock = () => {
             lock = null;
         };
         if (lock === null) {
@@ -11,10 +11,10 @@ function createLock(name) {
         return false;
     };
 }
-var globalHorizontalLock = createLock("dragHorizontal");
-var globalVerticalLock = createLock("dragVertical");
+const globalHorizontalLock = createLock("dragHorizontal");
+const globalVerticalLock = createLock("dragVertical");
 function getGlobalLock(drag) {
-    var lock = false;
+    let lock = false;
     if (drag === "y") {
         lock = globalVerticalLock();
     }
@@ -22,20 +22,20 @@ function getGlobalLock(drag) {
         lock = globalHorizontalLock();
     }
     else {
-        var openHorizontal_1 = globalHorizontalLock();
-        var openVertical_1 = globalVerticalLock();
-        if (openHorizontal_1 && openVertical_1) {
-            lock = function () {
-                openHorizontal_1();
-                openVertical_1();
+        const openHorizontal = globalHorizontalLock();
+        const openVertical = globalVerticalLock();
+        if (openHorizontal && openVertical) {
+            lock = () => {
+                openHorizontal();
+                openVertical();
             };
         }
         else {
             // Release the locks because we don't use them
-            if (openHorizontal_1)
-                openHorizontal_1();
-            if (openVertical_1)
-                openVertical_1();
+            if (openHorizontal)
+                openHorizontal();
+            if (openVertical)
+                openVertical();
         }
     }
     return lock;
@@ -43,7 +43,7 @@ function getGlobalLock(drag) {
 function isDragActive() {
     // Check the gesture lock - if we get it, it means no drag gesture is active
     // and we can safely fire the tap gesture.
-    var openGestureLock = getGlobalLock(true);
+    const openGestureLock = getGlobalLock(true);
     if (!openGestureLock)
         return true;
     openGestureLock();

package/dist/es/gestures/use-focus-gesture.mjs

@@ -7,13 +7,12 @@ import { useDomEvent } from '../events/use-dom-event.mjs';
  * @param ref
  * @internal
  */
-function useFocusGesture(_a) {
-    var whileFocus = _a.whileFocus, visualElement = _a.visualElement;
-    var onFocus = function () {
+function useFocusGesture({ whileFocus, visualElement }) {
+    const onFocus = () => {
         var _a;
         (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Focus, true);
     };
-    var onBlur = function () {
+    const onBlur = () => {
         var _a;
         (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Focus, false);
     };

package/dist/es/gestures/use-hover-gesture.mjs

@@ -4,7 +4,7 @@ import { usePointerEvent } from '../events/use-pointer-event.mjs';
 import { isDragActive } from './drag/utils/lock.mjs';
 
 function createHoverEvent(visualElement, isActive, callback) {
-    return function (event, info) {
+    return (event, info) => {
         var _a;
         if (!isMouseEvent(event) || isDragActive())
             return;
@@ -15,8 +15,7 @@ function createHoverEvent(visualElement, isActive, callback) {
         callback === null || callback === void 0 ? void 0 : callback(event, info);
     };
 }
-function useHoverGesture(_a) {
-    var onHoverStart = _a.onHoverStart, onHoverEnd = _a.onHoverEnd, whileHover = _a.whileHover, visualElement = _a.visualElement;
+function useHoverGesture({ onHoverStart, onHoverEnd, whileHover, visualElement, }) {
     usePointerEvent(visualElement, "pointerenter", onHoverStart || whileHover
         ? createHoverEvent(visualElement, true, onHoverStart)
         : undefined, { passive: !onHoverStart });

package/dist/es/gestures/use-pan-gesture.mjs

@@ -16,32 +16,31 @@ import { PanSession } from './PanSession.mjs';
  *
  * @internal
  */
-function usePanGesture(_a) {
-    var onPan = _a.onPan, onPanStart = _a.onPanStart, onPanEnd = _a.onPanEnd, onPanSessionStart = _a.onPanSessionStart, visualElement = _a.visualElement;
-    var hasPanEvents = onPan || onPanStart || onPanEnd || onPanSessionStart;
-    var panSession = useRef(null);
-    var transformPagePoint = useContext(MotionConfigContext).transformPagePoint;
-    var handlers = {
+function usePanGesture({ onPan, onPanStart, onPanEnd, onPanSessionStart, visualElement, }) {
+    const hasPanEvents = onPan || onPanStart || onPanEnd || onPanSessionStart;
+    const panSession = useRef(null);
+    const { transformPagePoint } = useContext(MotionConfigContext);
+    const handlers = {
         onSessionStart: onPanSessionStart,
         onStart: onPanStart,
         onMove: onPan,
-        onEnd: function (event, info) {
+        onEnd: (event, info) => {
             panSession.current = null;
             onPanEnd && onPanEnd(event, info);
         },
     };
-    useEffect(function () {
+    useEffect(() => {
         if (panSession.current !== null) {
             panSession.current.updateHandlers(handlers);
         }
     });
     function onPointerDown(event) {
         panSession.current = new PanSession(event, handlers, {
-            transformPagePoint: transformPagePoint,
+            transformPagePoint,
         });
     }
     usePointerEvent(visualElement, "pointerdown", hasPanEvents && onPointerDown);
-    useUnmountEffect(function () { return panSession.current && panSession.current.end(); });
+    useUnmountEffect(() => panSession.current && panSession.current.end());
 }
 
 export { usePanGesture };

package/dist/es/gestures/use-tap-gesture.mjs

@@ -10,15 +10,14 @@ import { isDragActive } from './drag/utils/lock.mjs';
  * @param handlers -
  * @internal
  */
-function useTapGesture(_a) {
-    var onTap = _a.onTap, onTapStart = _a.onTapStart, onTapCancel = _a.onTapCancel, whileTap = _a.whileTap, visualElement = _a.visualElement;
-    var hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;
-    var isPressing = useRef(false);
-    var cancelPointerEndListeners = useRef(null);
+function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement, }) {
+    const hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;
+    const isPressing = useRef(false);
+    const cancelPointerEndListeners = useRef(null);
     /**
      * Only set listener to passive if there are no external listeners.
      */
-    var eventOptions = {
+    const eventOptions = {
         passive: !(onTapStart || onTap || onTapCancel || onPointerDown),
     };
     function removePointerEndListener() {

package/dist/es/gestures/utils/event-type.mjs

@@ -6,7 +6,7 @@ function isMouseEvent(event) {
     return event instanceof MouseEvent;
 }
 function isTouchEvent(event) {
-    var hasTouches = !!event.touches;
+    const hasTouches = !!event.touches;
     return hasTouches;
 }
 

package/dist/es/gestures/utils/is-node-or-child.mjs

@@ -5,7 +5,7 @@
  * @param parent - Element to find
  * @param child - Element to test against parent
  */
-var isNodeOrChild = function (parent, child) {
+const isNodeOrChild = (parent, child) => {
     if (!child) {
         return false;
     }

package/dist/es/index.mjs

@@ -19,6 +19,7 @@ export { useScroll } from './value/use-scroll.mjs';
 export { useElementScroll } from './value/scroll/use-element-scroll.mjs';
 export { useViewportScroll } from './value/scroll/use-viewport-scroll.mjs';
 export { useTime } from './value/use-time.mjs';
+export { useWillChange } from './value/use-will-change/index.mjs';
 export { useReducedMotion, useReducedMotionConfig } from './utils/use-reduced-motion.mjs';
 export { animationControls } from './animation/animation-controls.mjs';
 export { useAnimation, useAnimationControls } from './animation/use-animation.mjs';

package/dist/es/motion/features/animations.mjs

@@ -1,4 +1,3 @@
-import { __read } from 'tslib';
 import { useEffect, useContext } from 'react';
 import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';
 import { usePresence } from '../../components/AnimatePresence/use-presence.mjs';
@@ -7,9 +6,8 @@ import { createAnimationState } from '../../render/utils/animation-state.mjs';
 import { AnimationType } from '../../render/utils/types.mjs';
 import { makeRenderlessComponent } from '../utils/make-renderless-component.mjs';
 
-var animations = {
-    animation: makeRenderlessComponent(function (_a) {
-        var visualElement = _a.visualElement, animate = _a.animate;
+const animations = {
+    animation: makeRenderlessComponent(({ visualElement, animate }) => {
         /**
          * We dynamically generate the AnimationState manager as it contains a reference
          * to the underlying animation library. We only want to load that if we load this,
@@ -20,17 +18,17 @@ var animations = {
          * Subscribe any provided AnimationControls to the component's VisualElement
          */
         if (isAnimationControls(animate)) {
-            useEffect(function () { return animate.subscribe(visualElement); }, [animate]);
+            useEffect(() => animate.subscribe(visualElement), [animate]);
         }
     }),
-    exit: makeRenderlessComponent(function (props) {
-        var custom = props.custom, visualElement = props.visualElement;
-        var _a = __read(usePresence(), 2), isPresent = _a[0], safeToRemove = _a[1];
-        var presenceContext = useContext(PresenceContext);
-        useEffect(function () {
+    exit: makeRenderlessComponent((props) => {
+        const { custom, visualElement } = props;
+        const [isPresent, safeToRemove] = usePresence();
+        const presenceContext = useContext(PresenceContext);
+        useEffect(() => {
             var _a, _b;
             visualElement.isPresent = isPresent;
-            var animation = (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Exit, !isPresent, { custom: (_b = presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.custom) !== null && _b !== void 0 ? _b : custom });
+            const animation = (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Exit, !isPresent, { custom: (_b = presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.custom) !== null && _b !== void 0 ? _b : custom });
             !isPresent && (animation === null || animation === void 0 ? void 0 : animation.then(safeToRemove));
         }, [isPresent]);
     }),

package/dist/es/motion/features/definitions.mjs

@@ -1,7 +1,7 @@
-var createDefinition = function (propNames) { return ({
-    isEnabled: function (props) { return propNames.some(function (name) { return !!props[name]; }); },
-}); };
-var featureDefinitions = {
+const createDefinition = (propNames) => ({
+    isEnabled: (props) => propNames.some((name) => !!props[name]),
+});
+const featureDefinitions = {
     measureLayout: createDefinition(["layout", "layoutId", "drag"]),
     animation: createDefinition([
         "animate",
@@ -31,7 +31,7 @@ var featureDefinitions = {
     ]),
 };
 function loadFeatures(features) {
-    for (var key in features) {
+    for (const key in features) {
         if (features[key] === null)
             continue;
         if (key === "projectionNodeConstructor") {

package/dist/es/motion/features/drag.mjs

@@ -2,7 +2,7 @@ import { useDrag } from '../../gestures/drag/use-drag.mjs';
 import { usePanGesture } from '../../gestures/use-pan-gesture.mjs';
 import { makeRenderlessComponent } from '../utils/make-renderless-component.mjs';
 
-var drag = {
+const drag = {
     pan: makeRenderlessComponent(usePanGesture),
     drag: makeRenderlessComponent(useDrag),
 };

package/dist/es/motion/features/gestures.mjs

@@ -4,7 +4,7 @@ import { useTapGesture } from '../../gestures/use-tap-gesture.mjs';
 import { useViewport } from './viewport/use-viewport.mjs';
 import { makeRenderlessComponent } from '../utils/make-renderless-component.mjs';
 
-var gestureAnimations = {
+const gestureAnimations = {
     inView: makeRenderlessComponent(useViewport),
     tap: makeRenderlessComponent(useTapGesture),
     focus: makeRenderlessComponent(useFocusGesture),

package/dist/es/motion/features/layout/MeasureLayout.mjs

@@ -1,4 +1,3 @@
-import { __extends, __assign, __read } from 'tslib';
 import sync from 'framesync';
 import React__default, { useContext } from 'react';
 import { usePresence } from '../../../components/AnimatePresence/use-presence.mjs';
@@ -9,20 +8,15 @@ import { correctBorderRadius } from '../../../projection/styles/scale-border-rad
 import { correctBoxShadow } from '../../../projection/styles/scale-box-shadow.mjs';
 import { addScaleCorrector } from '../../../projection/styles/scale-correction.mjs';
 
-var MeasureLayoutWithContext = /** @class */ (function (_super) {
-    __extends(MeasureLayoutWithContext, _super);
-    function MeasureLayoutWithContext() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
+class MeasureLayoutWithContext extends React__default.Component {
     /**
      * This only mounts projection nodes for components that
      * need measuring, we might want to do it for all components
      * in order to incorporate transforms
      */
-    MeasureLayoutWithContext.prototype.componentDidMount = function () {
-        var _this = this;
-        var _a = this.props, visualElement = _a.visualElement, layoutGroup = _a.layoutGroup, switchLayoutGroup = _a.switchLayoutGroup, layoutId = _a.layoutId;
-        var projection = visualElement.projection;
+    componentDidMount() {
+        const { visualElement, layoutGroup, switchLayoutGroup, layoutId } = this.props;
+        const { projection } = visualElement;
         addScaleCorrector(defaultScaleCorrectors);
         if (projection) {
             if (layoutGroup === null || layoutGroup === void 0 ? void 0 : layoutGroup.group)
@@ -31,17 +25,16 @@ var MeasureLayoutWithContext = /** @class */ (function (_super) {
                 switchLayoutGroup.register(projection);
             }
             projection.root.didUpdate();
-            projection.addEventListener("animationComplete", function () {
-                _this.safeToRemove();
+            projection.addEventListener("animationComplete", () => {
+                this.safeToRemove();
             });
-            projection.setOptions(__assign(__assign({}, projection.options), { onExitComplete: function () { return _this.safeToRemove(); } }));
+            projection.setOptions(Object.assign(Object.assign({}, projection.options), { onExitComplete: () => this.safeToRemove() }));
         }
         globalProjectionState.hasEverUpdated = true;
-    };
-    MeasureLayoutWithContext.prototype.getSnapshotBeforeUpdate = function (prevProps) {
-        var _this = this;
-        var _a = this.props, layoutDependency = _a.layoutDependency, visualElement = _a.visualElement, drag = _a.drag, isPresent = _a.isPresent;
-        var projection = visualElement.projection;
+    }
+    getSnapshotBeforeUpdate(prevProps) {
+        const { layoutDependency, visualElement, drag, isPresent } = this.props;
+        const projection = visualElement.projection;
         if (!projection)
             return null;
         /**
@@ -70,28 +63,28 @@ var MeasureLayoutWithContext = /** @class */ (function (_super) {
                  * it's in charge of the exit animation and therefore should
                  * be in charge of the safe to remove. Otherwise we call it here.
                  */
-                sync.postRender(function () {
+                sync.postRender(() => {
                     var _a;
                     if (!((_a = projection.getStack()) === null || _a === void 0 ? void 0 : _a.members.length)) {
-                        _this.safeToRemove();
+                        this.safeToRemove();
                     }
                 });
             }
         }
         return null;
-    };
-    MeasureLayoutWithContext.prototype.componentDidUpdate = function () {
-        var projection = this.props.visualElement.projection;
+    }
+    componentDidUpdate() {
+        const { projection } = this.props.visualElement;
         if (projection) {
             projection.root.didUpdate();
             if (!projection.currentAnimation && projection.isLead()) {
                 this.safeToRemove();
             }
         }
-    };
-    MeasureLayoutWithContext.prototype.componentWillUnmount = function () {
-        var _a = this.props, visualElement = _a.visualElement, layoutGroup = _a.layoutGroup, promoteContext = _a.switchLayoutGroup;
-        var projection = visualElement.projection;
+    }
+    componentWillUnmount() {
+        const { visualElement, layoutGroup, switchLayoutGroup: promoteContext, } = this.props;
+        const { projection } = visualElement;
         if (projection) {
             projection.scheduleCheckAfterUnmount();
             if (layoutGroup === null || layoutGroup === void 0 ? void 0 : layoutGroup.group)
@@ -99,23 +92,22 @@ var MeasureLayoutWithContext = /** @class */ (function (_super) {
             if (promoteContext === null || promoteContext === void 0 ? void 0 : promoteContext.deregister)
                 promoteContext.deregister(projection);
         }
-    };
-    MeasureLayoutWithContext.prototype.safeToRemove = function () {
-        var safeToRemove = this.props.safeToRemove;
+    }
+    safeToRemove() {
+        const { safeToRemove } = this.props;
         safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove();
-    };
-    MeasureLayoutWithContext.prototype.render = function () {
+    }
+    render() {
         return null;
-    };
-    return MeasureLayoutWithContext;
-}(React__default.Component));
+    }
+}
 function MeasureLayout(props) {
-    var _a = __read(usePresence(), 2), isPresent = _a[0], safeToRemove = _a[1];
-    var layoutGroup = useContext(LayoutGroupContext);
-    return (React__default.createElement(MeasureLayoutWithContext, __assign({}, props, { layoutGroup: layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove })));
+    const [isPresent, safeToRemove] = usePresence();
+    const layoutGroup = useContext(LayoutGroupContext);
+    return (React__default.createElement(MeasureLayoutWithContext, Object.assign({}, props, { layoutGroup: layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove })));
 }
-var defaultScaleCorrectors = {
-    borderRadius: __assign(__assign({}, correctBorderRadius), { applyTo: [
+const defaultScaleCorrectors = {
+    borderRadius: Object.assign(Object.assign({}, correctBorderRadius), { applyTo: [
             "borderTopLeftRadius",
             "borderTopRightRadius",
             "borderBottomLeftRadius",

package/dist/es/motion/features/layout/index.mjs

@@ -1,6 +1,6 @@
 import { MeasureLayout } from './MeasureLayout.mjs';
 
-var layoutFeatures = {
+const layoutFeatures = {
     measureLayout: MeasureLayout,
 };
 

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

@@ -1,4 +1,3 @@
-import { __assign } from 'tslib';
 import * as React from 'react';
 import { useContext } from 'react';
 import { env } from '../../utils/process.mjs';
@@ -6,14 +5,14 @@ import { featureDefinitions } from './definitions.mjs';
 import { invariant } from 'hey-listen';
 import { LazyContext } from '../../context/LazyContext.mjs';
 
-var featureNames = Object.keys(featureDefinitions);
-var numFeatures = featureNames.length;
+const featureNames = Object.keys(featureDefinitions);
+const numFeatures = featureNames.length;
 /**
  * Load features via renderless components based on the provided MotionProps.
  */
 function useFeatures(props, visualElement, preloadedFeatures) {
-    var features = [];
-    var lazyContext = useContext(LazyContext);
+    const features = [];
+    const lazyContext = useContext(LazyContext);
     if (!visualElement)
         return null;
     /**
@@ -23,16 +22,16 @@ function useFeatures(props, visualElement, preloadedFeatures) {
     if (env !== "production" && preloadedFeatures && lazyContext.strict) {
         invariant(false, "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.");
     }
-    for (var i = 0; i < numFeatures; i++) {
-        var name_1 = featureNames[i];
-        var _a = featureDefinitions[name_1], isEnabled = _a.isEnabled, Component = _a.Component;
+    for (let i = 0; i < numFeatures; i++) {
+        const name = featureNames[i];
+        const { isEnabled, Component } = featureDefinitions[name];
         /**
          * It might be possible in the future to use this moment to
          * dynamically request functionality. In initial tests this
          * was producing a lot of duplication amongst bundles.
          */
         if (isEnabled(props) && Component) {
-            features.push(React.createElement(Component, __assign({ key: name_1 }, props, { visualElement: visualElement })));
+            features.push(React.createElement(Component, Object.assign({ key: name }, props, { visualElement: visualElement })));
         }
     }
     return features;

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

@@ -2,22 +2,21 @@ import { isRefObject } from '../../utils/is-ref-object.mjs';
 import { useContext } from 'react';
 import { SwitchLayoutGroupContext } from '../../context/SwitchLayoutGroupContext.mjs';
 
-function useProjection(projectionId, _a, visualElement, ProjectionNodeConstructor) {
-    var _b;
-    var layoutId = _a.layoutId, layout = _a.layout, drag = _a.drag, dragConstraints = _a.dragConstraints, layoutScroll = _a.layoutScroll;
-    var initialPromotionConfig = useContext(SwitchLayoutGroupContext);
+function useProjection(projectionId, { layoutId, layout, drag, dragConstraints, layoutScroll }, visualElement, ProjectionNodeConstructor) {
+    var _a;
+    const initialPromotionConfig = useContext(SwitchLayoutGroupContext);
     if (!ProjectionNodeConstructor ||
         !visualElement ||
         (visualElement === null || visualElement === void 0 ? void 0 : visualElement.projection)) {
         return;
     }
-    visualElement.projection = new ProjectionNodeConstructor(projectionId, visualElement.getLatestValues(), (_b = visualElement.parent) === null || _b === void 0 ? void 0 : _b.projection);
+    visualElement.projection = new ProjectionNodeConstructor(projectionId, visualElement.getLatestValues(), (_a = visualElement.parent) === null || _a === void 0 ? void 0 : _a.projection);
     visualElement.projection.setOptions({
-        layoutId: layoutId,
-        layout: layout,
+        layoutId,
+        layout,
         alwaysMeasureLayout: Boolean(drag) || (dragConstraints && isRefObject(dragConstraints)),
-        visualElement: visualElement,
-        scheduleRender: function () { return visualElement.scheduleRender(); },
+        visualElement,
+        scheduleRender: () => visualElement.scheduleRender(),
         /**
          * TODO: Update options in an effect. This could be tricky as it'll be too late
          * to update by the time layout animations run.
@@ -26,8 +25,8 @@ function useProjection(projectionId, _a, visualElement, ProjectionNodeConstructo
          *
          */
         animationType: typeof layout === "string" ? layout : "both",
-        initialPromotionConfig: initialPromotionConfig,
-        layoutScroll: layoutScroll,
+        initialPromotionConfig,
+        layoutScroll,
     });
 }