framer-motion 9.1.0 → 9.1.2

package/dist/es/animation/hooks/animation-controls.mjs

@@ -1,4 +1,4 @@
-import { invariant } from 'hey-listen';
+import { invariant } from '../../utils/errors.mjs';
 import { animateVisualElement, stopAnimation } from '../../render/utils/animation.mjs';
 import { setValues } from '../../render/utils/setters.mjs';
 

package/dist/es/animation/index.mjs

@@ -1,4 +1,4 @@
-import { warning } from 'hey-listen';
+import { warning } from '../utils/errors.mjs';
 import { secondsToMilliseconds } from '../utils/time-conversion.mjs';
 import { instantAnimationState } from '../utils/use-instant-transition-state.mjs';
 import { createAcceleratedAnimation } from './waapi/create-accelerated-animation.mjs';

package/dist/es/animation/legacy-popmotion/find-spring.mjs

@@ -1,4 +1,4 @@
-import { warning } from 'hey-listen';
+import { warning } from '../../utils/errors.mjs';
 import { clamp } from '../../utils/clamp.mjs';
 
 const safeMin = 0.001;

package/dist/es/animation/legacy-popmotion/keyframes.mjs

@@ -1,17 +1,12 @@
 import { easeInOut } from '../../easing/ease.mjs';
 import { interpolate } from '../../utils/interpolate.mjs';
+import { defaultOffset } from '../../utils/offsets/default.mjs';
+import { convertOffsetToTimes } from '../../utils/offsets/time.mjs';
 import { isEasingArray, easingDefinitionToFunction } from '../utils/easing.mjs';
 
 function defaultEasing(values, easing) {
     return values.map(() => easing || easeInOut).splice(0, values.length - 1);
 }
-function defaultOffset(values) {
-    const numValues = values.length;
-    return values.map((_value, i) => i !== 0 ? i / (numValues - 1) : 0);
-}
-function convertOffsetToTimes(offset, duration) {
-    return offset.map((o) => o * duration);
-}
 function keyframes({ keyframes: keyframeValues, ease = easeInOut, times, duration = 300, }) {
     keyframeValues = [...keyframeValues];
     /**
@@ -59,4 +54,4 @@ function keyframes({ keyframes: keyframeValues, ease = easeInOut, times, duratio
     };
 }
 
-export { convertOffsetToTimes, defaultEasing, defaultOffset, keyframes };
+export { defaultEasing, keyframes };

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

@@ -1,4 +1,4 @@
-import { invariant } from 'hey-listen';
+import { invariant } from '../../utils/errors.mjs';
 import { cubicBezier } from '../../easing/cubic-bezier.mjs';
 import { noop } from '../../utils/noop.mjs';
 import { easeIn, easeInOut, easeOut } from '../../easing/ease.mjs';

package/dist/es/components/AnimateSharedLayout.mjs

@@ -1,10 +1,10 @@
-import { warning } from 'hey-listen';
+import { warning } from '../utils/errors.mjs';
 import * as React from 'react';
 import { useConstant } from '../utils/use-constant.mjs';
 import { LayoutGroup } from './LayoutGroup/index.mjs';
 
 let id = 0;
-const AnimateSharedLayout = ({ children, }) => {
+const AnimateSharedLayout = ({ children }) => {
     React.useEffect(() => {
         warning(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
     }, []);

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

@@ -1,4 +1,4 @@
-import { invariant } from 'hey-listen';
+import { invariant } from '../../utils/errors.mjs';
 import * as React from 'react';
 import { forwardRef, useRef, useEffect } from 'react';
 import { ReorderContext } from '../../context/ReorderContext.mjs';

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

@@ -1,4 +1,4 @@
-import { invariant } from 'hey-listen';
+import { invariant } from '../../utils/errors.mjs';
 import * as React from 'react';
 import { forwardRef, useContext, useRef, useEffect } from 'react';
 import { ReorderContext } from '../../context/ReorderContext.mjs';

package/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -1,10 +1,9 @@
-import { invariant } from 'hey-listen';
+import { invariant } from '../../utils/errors.mjs';
 import { PanSession } from '../pan/PanSession.mjs';
 import { getGlobalLock } from './utils/lock.mjs';
 import { isRefObject } from '../../utils/is-ref-object.mjs';
 import { addPointerEvent } from '../../events/add-pointer-event.mjs';
 import { applyConstraints, calcRelativeConstraints, resolveDragElastic, calcViewportConstraints, defaultElastic, rebaseAxisConstraints, calcOrigin } from './utils/constraints.mjs';
-import { AnimationType } from '../../render/utils/types.mjs';
 import { createBox } from '../../projection/geometry/models.mjs';
 import { eachAxis } from '../../projection/utils/each-axis.mjs';
 import { measurePageBox } from '../../projection/utils/measure.mjs';
@@ -97,7 +96,7 @@ class VisualElementDragControls {
             // Fire onDragStart event
             onDragStart && onDragStart(event, info);
             const { animationState } = this.visualElement;
-            animationState && animationState.setActive(AnimationType.Drag, true);
+            animationState && animationState.setActive("whileDrag" /* AnimationType.Drag */, true);
         };
         const onMove = (event, info) => {
             // latestPointerEvent = event
@@ -162,7 +161,7 @@ class VisualElementDragControls {
             this.openGlobalLock();
             this.openGlobalLock = null;
         }
-        animationState && animationState.setActive(AnimationType.Drag, false);
+        animationState && animationState.setActive("whileDrag" /* AnimationType.Drag */, false);
     }
     updateAxis(axis, _point, offset) {
         const { drag } = this.getProps();

package/dist/es/gestures/focus.mjs

@@ -1,6 +1,5 @@
 import { addDomEvent } from '../events/add-dom-event.mjs';
 import { Feature } from '../motion/features/Feature.mjs';
-import { AnimationType } from '../render/utils/types.mjs';
 import { pipe } from '../utils/pipe.mjs';
 
 class FocusGesture extends Feature {
@@ -24,13 +23,13 @@ class FocusGesture extends Feature {
         }
         if (!isFocusVisible || !this.node.animationState)
             return;
-        this.node.animationState.setActive(AnimationType.Focus, true);
+        this.node.animationState.setActive("whileFocus" /* AnimationType.Focus */, true);
         this.isActive = true;
     }
     onBlur() {
         if (!this.isActive || !this.node.animationState)
             return;
-        this.node.animationState.setActive(AnimationType.Focus, false);
+        this.node.animationState.setActive("whileFocus" /* AnimationType.Focus */, false);
         this.isActive = false;
     }
     mount() {

package/dist/es/gestures/hover.mjs

@@ -1,5 +1,4 @@
 import { addPointerEvent } from '../events/add-pointer-event.mjs';
-import { AnimationType } from '../render/utils/types.mjs';
 import { pipe } from '../utils/pipe.mjs';
 import { isDragActive } from './drag/utils/lock.mjs';
 import { Feature } from '../motion/features/Feature.mjs';
@@ -12,7 +11,7 @@ function addHoverEvent(node, isActive) {
             return;
         const props = node.getProps();
         if (node.animationState && props.whileHover) {
-            node.animationState.setActive(AnimationType.Hover, isActive);
+            node.animationState.setActive("whileHover" /* AnimationType.Hover */, isActive);
         }
         if (props[callbackName]) {
             props[callbackName](event, info);

package/dist/es/gestures/press.mjs

@@ -2,7 +2,6 @@ import { extractEventInfo } from '../events/event-info.mjs';
 import { addDomEvent } from '../events/add-dom-event.mjs';
 import { addPointerEvent } from '../events/add-pointer-event.mjs';
 import { Feature } from '../motion/features/Feature.mjs';
-import { AnimationType } from '../render/utils/types.mjs';
 import { pipe } from '../utils/pipe.mjs';
 import { isDragActive } from './drag/utils/lock.mjs';
 import { isNodeOrChild } from './utils/is-node-or-child.mjs';
@@ -74,7 +73,7 @@ class PressGesture extends Feature {
          * Ensure we trigger animations before firing event callback
          */
         if (whileTap && this.node.animationState) {
-            this.node.animationState.setActive(AnimationType.Tap, true);
+            this.node.animationState.setActive("whileTap" /* AnimationType.Tap */, true);
         }
         onTapStart && onTapStart(event, info);
     }
@@ -83,7 +82,7 @@ class PressGesture extends Feature {
         this.isPressing = false;
         const props = this.node.getProps();
         if (props.whileTap && this.node.animationState) {
-            this.node.animationState.setActive(AnimationType.Tap, false);
+            this.node.animationState.setActive("whileTap" /* AnimationType.Tap */, false);
         }
         return !isDragActive();
     }

package/dist/es/index.mjs

@@ -47,6 +47,7 @@ export { buildTransform } from './render/html/utils/build-transform.mjs';
 export { clamp } from './utils/clamp.mjs';
 export { delay } from './utils/delay.mjs';
 export { distance, distance2D } from './utils/distance.mjs';
+export { invariant, warning } from './utils/errors.mjs';
 export { interpolate } from './utils/interpolate.mjs';
 export { mix } from './utils/mix.mjs';
 export { pipe } from './utils/pipe.mjs';

package/dist/es/motion/features/animation/exit.mjs

@@ -1,4 +1,3 @@
-import { AnimationType } from '../../../render/utils/types.mjs';
 import { Feature } from '../Feature.mjs';
 
 let id = 0;
@@ -15,7 +14,7 @@ class ExitAnimationFeature extends Feature {
         if (!this.node.animationState || isPresent === prevIsPresent) {
             return;
         }
-        const exitAnimation = this.node.animationState.setActive(AnimationType.Exit, !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });
+        const exitAnimation = this.node.animationState.setActive("exit" /* AnimationType.Exit */, !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });
         if (onExitComplete && !isPresent) {
             exitAnimation.then(() => onExitComplete(this.id));
         }

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

@@ -1,4 +1,3 @@
-import { AnimationType } from '../../../render/utils/types.mjs';
 import { Feature } from '../Feature.mjs';
 import { observeIntersection } from './observers.mjs';
 
@@ -26,7 +25,7 @@ class InViewFeature extends Feature {
             const { onViewportEnter } = this.node.getProps();
             onViewportEnter && onViewportEnter(null);
             if (this.node.animationState) {
-                this.node.animationState.setActive(AnimationType.InView, true);
+                this.node.animationState.setActive("whileInView" /* AnimationType.InView */, true);
             }
         });
     }
@@ -63,7 +62,7 @@ class InViewFeature extends Feature {
                 this.hasEnteredView = true;
             }
             if (this.node.animationState) {
-                this.node.animationState.setActive(AnimationType.InView, isIntersecting);
+                this.node.animationState.setActive("whileInView" /* AnimationType.InView */, isIntersecting);
             }
             /**
              * Use the latest committed props rather than the ones in scope

package/dist/es/render/VisualElement.mjs

@@ -1,5 +1,5 @@
 import { sync, cancelSync } from '../frameloop/index.mjs';
-import { warning, invariant } from 'hey-listen';
+import { warning, invariant } from '../utils/errors.mjs';
 import { createBox } from '../projection/geometry/models.mjs';
 import { isRefObject } from '../utils/is-ref-object.mjs';
 import { initPrefersReducedMotion } from '../utils/reduced-motion/index.mjs';
@@ -9,13 +9,13 @@ import { motionValue } from '../value/index.mjs';
 import { isWillChangeMotionValue } from '../value/use-will-change/is.mjs';
 import { isMotionValue } from '../value/utils/is-motion-value.mjs';
 import { transformProps } from './html/utils/transform.mjs';
-import { variantPriorityOrder } from './utils/animation-state.mjs';
 import { isControllingVariants, isVariantNode } from './utils/is-controlling-variants.mjs';
 import { isVariantLabel } from './utils/is-variant-label.mjs';
 import { updateMotionValuesFromProps } from './utils/motion-values.mjs';
 import { resolveVariantFromProps } from './utils/resolve-variants.mjs';
 import { warnOnce } from '../utils/warn-once.mjs';
 import { featureDefinitions } from '../motion/features/definitions.mjs';
+import { variantProps } from './utils/variant-props.mjs';
 
 const featureNames = Object.keys(featureDefinitions);
 const numFeatures = featureNames.length;
@@ -28,6 +28,7 @@ const propEventHandlers = [
     "LayoutAnimationStart",
     "LayoutAnimationComplete",
 ];
+const numVariantProps = variantProps.length;
 /**
  * A VisualElement is an imperative abstraction around UI elements such as
  * HTMLElement, SVGElement, Three.Object3D etc.
@@ -498,7 +499,5 @@ class VisualElement {
         }
     }
 }
-const variantProps = ["initial", ...variantPriorityOrder];
-const numVariantProps = variantProps.length;
 
 export { VisualElement };

package/dist/es/render/dom/resize/handle-element.mjs

@@ -0,0 +1,64 @@
+import { resolveElements } from '../utils/resolve-element.mjs';
+
+const resizeHandlers = new WeakMap();
+let observer;
+function getElementSize(target, borderBoxSize) {
+    if (borderBoxSize) {
+        const { inlineSize, blockSize } = borderBoxSize[0];
+        return { width: inlineSize, height: blockSize };
+    }
+    else if (target instanceof SVGElement && "getBBox" in target) {
+        return target.getBBox();
+    }
+    else {
+        return {
+            width: target.offsetWidth,
+            height: target.offsetHeight,
+        };
+    }
+}
+function notifyTarget({ target, contentRect, borderBoxSize, }) {
+    var _a;
+    (_a = resizeHandlers.get(target)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => {
+        handler({
+            target,
+            contentSize: contentRect,
+            get size() {
+                return getElementSize(target, borderBoxSize);
+            },
+        });
+    });
+}
+function notifyAll(entries) {
+    entries.forEach(notifyTarget);
+}
+function createResizeObserver() {
+    if (typeof ResizeObserver === "undefined")
+        return;
+    observer = new ResizeObserver(notifyAll);
+}
+function resizeElement(target, handler) {
+    if (!observer)
+        createResizeObserver();
+    const elements = resolveElements(target);
+    elements.forEach((element) => {
+        let elementHandlers = resizeHandlers.get(element);
+        if (!elementHandlers) {
+            elementHandlers = new Set();
+            resizeHandlers.set(element, elementHandlers);
+        }
+        elementHandlers.add(handler);
+        observer === null || observer === void 0 ? void 0 : observer.observe(element);
+    });
+    return () => {
+        elements.forEach((element) => {
+            const elementHandlers = resizeHandlers.get(element);
+            elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.delete(handler);
+            if (!(elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.size)) {
+                observer === null || observer === void 0 ? void 0 : observer.unobserve(element);
+            }
+        });
+    };
+}
+
+export { resizeElement };

package/dist/es/render/dom/resize/handle-window.mjs

@@ -0,0 +1,30 @@
+const windowCallbacks = new Set();
+let windowResizeHandler;
+function createWindowResizeHandler() {
+    windowResizeHandler = () => {
+        const size = {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        };
+        const info = {
+            target: window,
+            size,
+            contentSize: size,
+        };
+        windowCallbacks.forEach((callback) => callback(info));
+    };
+    window.addEventListener("resize", windowResizeHandler);
+}
+function resizeWindow(callback) {
+    windowCallbacks.add(callback);
+    if (!windowResizeHandler)
+        createWindowResizeHandler();
+    return () => {
+        windowCallbacks.delete(callback);
+        if (!windowCallbacks.size && windowResizeHandler) {
+            windowResizeHandler = undefined;
+        }
+    };
+}
+
+export { resizeWindow };

package/dist/es/render/dom/resize/index.mjs

@@ -0,0 +1,8 @@
+import { resizeElement } from './handle-element.mjs';
+import { resizeWindow } from './handle-window.mjs';
+
+function resize(a, b) {
+    return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
+}
+
+export { resize };

package/dist/es/render/dom/scroll/index.mjs

@@ -0,0 +1,74 @@
+import { resize } from '../resize/index.mjs';
+import { createScrollInfo } from './info.mjs';
+import { createOnScrollHandler } from './on-scroll-handler.mjs';
+
+const scrollListeners = new WeakMap();
+const resizeListeners = new WeakMap();
+const onScrollHandlers = new WeakMap();
+const getEventTarget = (element) => element === document.documentElement ? window : element;
+function scroll(onScroll, { container = document.documentElement, ...options } = {}) {
+    let containerHandlers = onScrollHandlers.get(container);
+    /**
+     * Get the onScroll handlers for this container.
+     * If one isn't found, create a new one.
+     */
+    if (!containerHandlers) {
+        containerHandlers = new Set();
+        onScrollHandlers.set(container, containerHandlers);
+    }
+    /**
+     * Create a new onScroll handler for the provided callback.
+     */
+    const info = createScrollInfo();
+    const containerHandler = createOnScrollHandler(container, onScroll, info, options);
+    containerHandlers.add(containerHandler);
+    /**
+     * Check if there's a scroll event listener for this container.
+     * If not, create one.
+     */
+    if (!scrollListeners.has(container)) {
+        const listener = () => {
+            const time = performance.now();
+            for (const handler of containerHandlers)
+                handler.measure();
+            for (const handler of containerHandlers)
+                handler.update(time);
+            for (const handler of containerHandlers)
+                handler.notify();
+        };
+        scrollListeners.set(container, listener);
+        const target = getEventTarget(container);
+        window.addEventListener("resize", listener, { passive: true });
+        if (container !== document.documentElement) {
+            resizeListeners.set(container, resize(container, listener));
+        }
+        target.addEventListener("scroll", listener, { passive: true });
+    }
+    const listener = scrollListeners.get(container);
+    const onLoadProcesss = requestAnimationFrame(listener);
+    return () => {
+        var _a;
+        cancelAnimationFrame(onLoadProcesss);
+        /**
+         * Check if we even have any handlers for this container.
+         */
+        const currentHandlers = onScrollHandlers.get(container);
+        if (!currentHandlers)
+            return;
+        currentHandlers.delete(containerHandler);
+        if (currentHandlers.size)
+            return;
+        /**
+         * If no more handlers, remove the scroll listener too.
+         */
+        const scrollListener = scrollListeners.get(container);
+        scrollListeners.delete(container);
+        if (scrollListener) {
+            getEventTarget(container).removeEventListener("scroll", scrollListener);
+            (_a = resizeListeners.get(container)) === null || _a === void 0 ? void 0 : _a();
+            window.removeEventListener("resize", scrollListener);
+        }
+    };
+}
+
+export { scroll };

package/dist/es/render/dom/scroll/info.mjs

@@ -0,0 +1,56 @@
+import { progress } from '../../../utils/progress.mjs';
+import { velocityPerSecond } from '../../../utils/velocity-per-second.mjs';
+
+/**
+ * A time in milliseconds, beyond which we consider the scroll velocity to be 0.
+ */
+const maxElapsed = 50;
+const createAxisInfo = () => ({
+    current: 0,
+    offset: [],
+    progress: 0,
+    scrollLength: 0,
+    targetOffset: 0,
+    targetLength: 0,
+    containerLength: 0,
+    velocity: 0,
+});
+const createScrollInfo = () => ({
+    time: 0,
+    x: createAxisInfo(),
+    y: createAxisInfo(),
+});
+const keys = {
+    x: {
+        length: "Width",
+        position: "Left",
+    },
+    y: {
+        length: "Height",
+        position: "Top",
+    },
+};
+function updateAxisInfo(element, axisName, info, time) {
+    const axis = info[axisName];
+    const { length, position } = keys[axisName];
+    const prev = axis.current;
+    const prevTime = info.time;
+    axis.current = element["scroll" + position];
+    axis.scrollLength = element["scroll" + length] - element["client" + length];
+    axis.offset.length = 0;
+    axis.offset[0] = 0;
+    axis.offset[1] = axis.scrollLength;
+    axis.progress = progress(0, axis.scrollLength, axis.current);
+    const elapsed = time - prevTime;
+    axis.velocity =
+        elapsed > maxElapsed
+            ? 0
+            : velocityPerSecond(axis.current - prev, elapsed);
+}
+function updateScrollInfo(element, info, time) {
+    updateAxisInfo(element, "x", info, time);
+    updateAxisInfo(element, "y", info, time);
+    info.time = time;
+}
+
+export { createScrollInfo, updateScrollInfo };

package/dist/es/render/dom/scroll/offsets/edge.mjs

@@ -0,0 +1,45 @@
+const namedEdges = {
+    start: 0,
+    center: 0.5,
+    end: 1,
+};
+function resolveEdge(edge, length, inset = 0) {
+    let delta = 0;
+    /**
+     * If we have this edge defined as a preset, replace the definition
+     * with the numerical value.
+     */
+    if (namedEdges[edge] !== undefined) {
+        edge = namedEdges[edge];
+    }
+    /**
+     * Handle unit values
+     */
+    if (typeof edge === "string") {
+        const asNumber = parseFloat(edge);
+        if (edge.endsWith("px")) {
+            delta = asNumber;
+        }
+        else if (edge.endsWith("%")) {
+            edge = asNumber / 100;
+        }
+        else if (edge.endsWith("vw")) {
+            delta = (asNumber / 100) * document.documentElement.clientWidth;
+        }
+        else if (edge.endsWith("vh")) {
+            delta = (asNumber / 100) * document.documentElement.clientHeight;
+        }
+        else {
+            edge = asNumber;
+        }
+    }
+    /**
+     * If the edge is defined as a number, handle as a progress value.
+     */
+    if (typeof edge === "number") {
+        delta = length * edge;
+    }
+    return inset + delta;
+}
+
+export { namedEdges, resolveEdge };

package/dist/es/render/dom/scroll/offsets/index.mjs

@@ -0,0 +1,54 @@
+import { calcInset } from './inset.mjs';
+import { ScrollOffset } from './presets.mjs';
+import { resolveOffset } from './offset.mjs';
+import { interpolate } from '../../../../utils/interpolate.mjs';
+import { defaultOffset } from '../../../../utils/offsets/default.mjs';
+
+const point = { x: 0, y: 0 };
+function resolveOffsets(container, info, options) {
+    let { offset: offsetDefinition = ScrollOffset.All } = options;
+    const { target = container, axis = "y" } = options;
+    const lengthLabel = axis === "y" ? "height" : "width";
+    const inset = target !== container ? calcInset(target, container) : point;
+    /**
+     * Measure the target and container. If they're the same thing then we
+     * use the container's scrollWidth/Height as the target, from there
+     * all other calculations can remain the same.
+     */
+    const targetSize = target === container
+        ? { width: container.scrollWidth, height: container.scrollHeight }
+        : { width: target.clientWidth, height: target.clientHeight };
+    const containerSize = {
+        width: container.clientWidth,
+        height: container.clientHeight,
+    };
+    /**
+     * Reset the length of the resolved offset array rather than creating a new one.
+     * TODO: More reusable data structures for targetSize/containerSize would also be good.
+     */
+    info[axis].offset.length = 0;
+    /**
+     * Populate the offset array by resolving the user's offset definition into
+     * a list of pixel scroll offets.
+     */
+    let hasChanged = !info[axis].interpolate;
+    const numOffsets = offsetDefinition.length;
+    for (let i = 0; i < numOffsets; i++) {
+        const offset = resolveOffset(offsetDefinition[i], containerSize[lengthLabel], targetSize[lengthLabel], inset[axis]);
+        if (!hasChanged && offset !== info[axis].interpolatorOffsets[i]) {
+            hasChanged = true;
+        }
+        info[axis].offset[i] = offset;
+    }
+    /**
+     * If the pixel scroll offsets have changed, create a new interpolator function
+     * to map scroll value into a progress.
+     */
+    if (hasChanged) {
+        info[axis].interpolate = interpolate(info[axis].offset, defaultOffset(offsetDefinition));
+        info[axis].interpolatorOffsets = [...info[axis].offset];
+    }
+    info[axis].progress = info[axis].interpolate(info[axis].current);
+}
+
+export { resolveOffsets };

package/dist/es/render/dom/scroll/offsets/inset.mjs

@@ -0,0 +1,25 @@
+function calcInset(element, container) {
+    let inset = { x: 0, y: 0 };
+    let current = element;
+    while (current && current !== container) {
+        if (current instanceof HTMLElement) {
+            inset.x += current.offsetLeft;
+            inset.y += current.offsetTop;
+            current = current.offsetParent;
+        }
+        else if (current instanceof SVGGraphicsElement && "getBBox" in current) {
+            const { top, left } = current.getBBox();
+            inset.x += left;
+            inset.y += top;
+            /**
+             * Assign the next parent element as the <svg /> tag.
+             */
+            while (current && current.tagName !== "svg") {
+                current = current.parentNode;
+            }
+        }
+    }
+    return inset;
+}
+
+export { calcInset };