motion 10.18.0 → 11.11.12

package/dist/es/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs

@@ -0,0 +1,42 @@
+import { invariant } from '../../../utils/errors.mjs';
+import { isNumericalString } from '../../../utils/is-numerical-string.mjs';
+import { isCSSVariableToken } from './is-css-variable.mjs';
+
+/**
+ * Parse Framer's special CSS variable format into a CSS token and a fallback.
+ *
+ * ```
+ * `var(--foo, #fff)` => [`--foo`, '#fff']
+ * ```
+ *
+ * @param current
+ */
+const splitCSSVariableRegex = 
+// eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
+/^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u;
+function parseCSSVariable(current) {
+    const match = splitCSSVariableRegex.exec(current);
+    if (!match)
+        return [,];
+    const [, token1, token2, fallback] = match;
+    return [`--${token1 !== null && token1 !== void 0 ? token1 : token2}`, fallback];
+}
+const maxDepth = 4;
+function getVariableValue(current, element, depth = 1) {
+    invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
+    const [token, fallback] = parseCSSVariable(current);
+    // No CSS variable detected
+    if (!token)
+        return;
+    // Attempt to read this CSS variable off the element
+    const resolved = window.getComputedStyle(element).getPropertyValue(token);
+    if (resolved) {
+        const trimmed = resolved.trim();
+        return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;
+    }
+    return isCSSVariableToken(fallback)
+        ? getVariableValue(fallback, element, depth + 1)
+        : fallback;
+}
+
+export { getVariableValue, parseCSSVariable };

package/dist/es/framer-motion/dist/es/render/dom/utils/filter-props.mjs

@@ -0,0 +1,59 @@
+import { isValidMotionProp } from '../../../motion/utils/valid-prop.mjs';
+
+let shouldForward = (key) => !isValidMotionProp(key);
+function loadExternalIsValidProp(isValidProp) {
+    if (!isValidProp)
+        return;
+    // Explicitly filter our events
+    shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key);
+}
+/**
+ * Emotion and Styled Components both allow users to pass through arbitrary props to their components
+ * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which
+ * of these should be passed to the underlying DOM node.
+ *
+ * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props
+ * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props
+ * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of
+ * `@emotion/is-prop-valid`, however to fix this problem we need to use it.
+ *
+ * By making it an optionalDependency we can offer this functionality only in the situations where it's
+ * actually required.
+ */
+try {
+    /**
+     * We attempt to import this package but require won't be defined in esm environments, in that case
+     * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed
+     * in favour of explicit injection.
+     */
+    loadExternalIsValidProp(require("@emotion/is-prop-valid").default);
+}
+catch (_a) {
+    // We don't need to actually do anything here - the fallback is the existing `isPropValid`.
+}
+function filterProps(props, isDom, forwardMotionProps) {
+    const filteredProps = {};
+    for (const key in props) {
+        /**
+         * values is considered a valid prop by Emotion, so if it's present
+         * this will be rendered out to the DOM unless explicitly filtered.
+         *
+         * We check the type as it could be used with the `feColorMatrix`
+         * element, which we support.
+         */
+        if (key === "values" && typeof props.values === "object")
+            continue;
+        if (shouldForward(key) ||
+            (forwardMotionProps === true && isValidMotionProp(key)) ||
+            (!isDom && !isValidMotionProp(key)) ||
+            // If trying to use native HTML drag events, forward drag listeners
+            (props["draggable"] &&
+                key.startsWith("onDrag"))) {
+            filteredProps[key] =
+                props[key];
+        }
+    }
+    return filteredProps;
+}
+
+export { filterProps, loadExternalIsValidProp };

package/dist/es/framer-motion/dist/es/render/dom/utils/is-css-variable.mjs

@@ -0,0 +1,15 @@
+const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
+const isCSSVariableName = 
+/*@__PURE__*/ checkStringStartsWith("--");
+const startsAsVariableToken = 
+/*@__PURE__*/ checkStringStartsWith("var(--");
+const isCSSVariableToken = (value) => {
+    const startsWithToken = startsAsVariableToken(value);
+    if (!startsWithToken)
+        return false;
+    // Ensure any comments are stripped from the value as this can harm performance of the regex.
+    return singleCssVariableRegex.test(value.split("/*")[0].trim());
+};
+const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
+
+export { isCSSVariableName, isCSSVariableToken };

package/dist/es/framer-motion/dist/es/render/dom/utils/is-svg-component.mjs

@@ -0,0 +1,30 @@
+import { lowercaseSVGElements } from '../../svg/lowercase-elements.mjs';
+
+function isSVGComponent(Component) {
+    if (
+    /**
+     * If it's not a string, it's a custom React component. Currently we only support
+     * HTML custom React components.
+     */
+    typeof Component !== "string" ||
+        /**
+         * If it contains a dash, the element is a custom HTML webcomponent.
+         */
+        Component.includes("-")) {
+        return false;
+    }
+    else if (
+    /**
+     * If it's in our list of lowercase SVG tags, it's an SVG component
+     */
+    lowercaseSVGElements.indexOf(Component) > -1 ||
+        /**
+         * If it contains a capital letter, it's an SVG component
+         */
+        /[A-Z]/u.test(Component)) {
+        return true;
+    }
+    return false;
+}
+
+export { isSVGComponent };

package/dist/es/framer-motion/dist/es/render/dom/utils/is-svg-element.mjs

@@ -0,0 +1,5 @@
+function isSVGElement(element) {
+    return element instanceof SVGElement && element.tagName !== "svg";
+}
+
+export { isSVGElement };

package/dist/es/framer-motion/dist/es/render/dom/utils/resolve-element.mjs

@@ -0,0 +1,28 @@
+import { invariant } from '../../../utils/errors.mjs';
+
+function resolveElements(elements, scope, selectorCache) {
+    var _a;
+    if (typeof elements === "string") {
+        let root = document;
+        if (scope) {
+            invariant(Boolean(scope.current), "Scope provided, but no element detected.");
+            root = scope.current;
+        }
+        if (selectorCache) {
+            (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = root.querySelectorAll(elements));
+            elements = selectorCache[elements];
+        }
+        else {
+            elements = root.querySelectorAll(elements);
+        }
+    }
+    else if (elements instanceof Element) {
+        elements = [elements];
+    }
+    /**
+     * Return an empty array
+     */
+    return Array.from(elements || []);
+}
+
+export { resolveElements };

package/dist/es/framer-motion/dist/es/render/dom/utils/unit-conversion.mjs

@@ -0,0 +1,65 @@
+import { transformPropOrder } from '../../html/utils/transform.mjs';
+import { number } from '../../../value/types/numbers/index.mjs';
+import { px } from '../../../value/types/numbers/units.mjs';
+
+const positionalKeys = new Set([
+    "width",
+    "height",
+    "top",
+    "left",
+    "right",
+    "bottom",
+    "x",
+    "y",
+    "translateX",
+    "translateY",
+]);
+const isNumOrPxType = (v) => v === number || v === px;
+const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
+const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
+    if (transform === "none" || !transform)
+        return 0;
+    const matrix3d = transform.match(/^matrix3d\((.+)\)$/u);
+    if (matrix3d) {
+        return getPosFromMatrix(matrix3d[1], pos3);
+    }
+    else {
+        const matrix = transform.match(/^matrix\((.+)\)$/u);
+        if (matrix) {
+            return getPosFromMatrix(matrix[1], pos2);
+        }
+        else {
+            return 0;
+        }
+    }
+};
+const transformKeys = new Set(["x", "y", "z"]);
+const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
+function removeNonTranslationalTransform(visualElement) {
+    const removedTransforms = [];
+    nonTranslationalTransformKeys.forEach((key) => {
+        const value = visualElement.getValue(key);
+        if (value !== undefined) {
+            removedTransforms.push([key, value.get()]);
+            value.set(key.startsWith("scale") ? 1 : 0);
+        }
+    });
+    return removedTransforms;
+}
+const positionalValues = {
+    // Dimensions
+    width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
+    height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
+    top: (_bbox, { top }) => parseFloat(top),
+    left: (_bbox, { left }) => parseFloat(left),
+    bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
+    right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
+    // Transform
+    x: getTranslateFromMatrix(4, 13),
+    y: getTranslateFromMatrix(5, 14),
+};
+// Alias translate longform names
+positionalValues.translateX = positionalValues.x;
+positionalValues.translateY = positionalValues.y;
+
+export { isNumOrPxType, positionalKeys, positionalValues, removeNonTranslationalTransform };

package/dist/es/framer-motion/dist/es/render/dom/value-types/animatable-none.mjs

@@ -0,0 +1,15 @@
+import { complex } from '../../../value/types/complex/index.mjs';
+import { filter } from '../../../value/types/complex/filter.mjs';
+import { getDefaultValueType } from './defaults.mjs';
+
+function getAnimatableNone(key, value) {
+    let defaultValueType = getDefaultValueType(key);
+    if (defaultValueType !== filter)
+        defaultValueType = complex;
+    // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
+    return defaultValueType.getAnimatableNone
+        ? defaultValueType.getAnimatableNone(value)
+        : undefined;
+}
+
+export { getAnimatableNone };

package/dist/es/framer-motion/dist/es/render/dom/value-types/defaults.mjs

@@ -0,0 +1,30 @@
+import { color } from '../../../value/types/color/index.mjs';
+import { filter } from '../../../value/types/complex/filter.mjs';
+import { numberValueTypes } from './number.mjs';
+
+/**
+ * A map of default value types for common values
+ */
+const defaultValueTypes = {
+    ...numberValueTypes,
+    // Color props
+    color,
+    backgroundColor: color,
+    outlineColor: color,
+    fill: color,
+    stroke: color,
+    // Border props
+    borderColor: color,
+    borderTopColor: color,
+    borderRightColor: color,
+    borderBottomColor: color,
+    borderLeftColor: color,
+    filter,
+    WebkitFilter: filter,
+};
+/**
+ * Gets the default ValueType for the provided value key
+ */
+const getDefaultValueType = (key) => defaultValueTypes[key];
+
+export { defaultValueTypes, getDefaultValueType };

package/dist/es/framer-motion/dist/es/render/dom/value-types/dimensions.mjs

@@ -0,0 +1,15 @@
+import { number } from '../../../value/types/numbers/index.mjs';
+import { px, percent, degrees, vw, vh } from '../../../value/types/numbers/units.mjs';
+import { testValueType } from './test.mjs';
+import { auto } from './type-auto.mjs';
+
+/**
+ * A list of value types commonly used for dimensions
+ */
+const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
+/**
+ * Tests a dimensional value against the list of dimension ValueTypes
+ */
+const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
+
+export { dimensionValueTypes, findDimensionValueType };

package/dist/es/framer-motion/dist/es/render/dom/value-types/find.mjs

@@ -0,0 +1,15 @@
+import { color } from '../../../value/types/color/index.mjs';
+import { complex } from '../../../value/types/complex/index.mjs';
+import { dimensionValueTypes } from './dimensions.mjs';
+import { testValueType } from './test.mjs';
+
+/**
+ * A list of all ValueTypes
+ */
+const valueTypes = [...dimensionValueTypes, color, complex];
+/**
+ * Tests a value against the list of ValueTypes
+ */
+const findValueType = (v) => valueTypes.find(testValueType(v));
+
+export { findValueType };

package/dist/es/framer-motion/dist/es/render/dom/value-types/get-as-type.mjs

@@ -0,0 +1,10 @@
+/**
+ * Provided a value and a ValueType, returns the value as that value type.
+ */
+const getValueAsType = (value, type) => {
+    return type && typeof value === "number"
+        ? type.transform(value)
+        : value;
+};
+
+export { getValueAsType };

package/dist/es/framer-motion/dist/es/render/dom/value-types/number-browser.mjs

@@ -0,0 +1,41 @@
+import { px } from '../../../value/types/numbers/units.mjs';
+
+const browserNumberValueTypes = {
+    // Border props
+    borderWidth: px,
+    borderTopWidth: px,
+    borderRightWidth: px,
+    borderBottomWidth: px,
+    borderLeftWidth: px,
+    borderRadius: px,
+    radius: px,
+    borderTopLeftRadius: px,
+    borderTopRightRadius: px,
+    borderBottomRightRadius: px,
+    borderBottomLeftRadius: px,
+    // Positioning props
+    width: px,
+    maxWidth: px,
+    height: px,
+    maxHeight: px,
+    top: px,
+    right: px,
+    bottom: px,
+    left: px,
+    // Spacing props
+    padding: px,
+    paddingTop: px,
+    paddingRight: px,
+    paddingBottom: px,
+    paddingLeft: px,
+    margin: px,
+    marginTop: px,
+    marginRight: px,
+    marginBottom: px,
+    marginLeft: px,
+    // Misc
+    backgroundPositionX: px,
+    backgroundPositionY: px,
+};
+
+export { browserNumberValueTypes };

package/dist/es/framer-motion/dist/es/render/dom/value-types/number.mjs

@@ -0,0 +1,18 @@
+import { alpha } from '../../../value/types/numbers/index.mjs';
+import { px } from '../../../value/types/numbers/units.mjs';
+import { browserNumberValueTypes } from './number-browser.mjs';
+import { transformValueTypes } from './transform.mjs';
+import { int } from './type-int.mjs';
+
+const numberValueTypes = {
+    ...browserNumberValueTypes,
+    ...transformValueTypes,
+    zIndex: int,
+    size: px,
+    // SVG
+    fillOpacity: alpha,
+    strokeOpacity: alpha,
+    numOctaves: int,
+};
+
+export { numberValueTypes };

package/dist/es/framer-motion/dist/es/render/dom/value-types/test.mjs

@@ -0,0 +1,6 @@
+/**
+ * Tests a provided value against a ValueType
+ */
+const testValueType = (v) => (type) => type.test(v);
+
+export { testValueType };

package/dist/es/framer-motion/dist/es/render/dom/value-types/transform.mjs

@@ -0,0 +1,31 @@
+import { scale, alpha } from '../../../value/types/numbers/index.mjs';
+import { degrees, px, progressPercentage } from '../../../value/types/numbers/units.mjs';
+
+const transformValueTypes = {
+    rotate: degrees,
+    rotateX: degrees,
+    rotateY: degrees,
+    rotateZ: degrees,
+    scale,
+    scaleX: scale,
+    scaleY: scale,
+    scaleZ: scale,
+    skew: degrees,
+    skewX: degrees,
+    skewY: degrees,
+    distance: px,
+    translateX: px,
+    translateY: px,
+    translateZ: px,
+    x: px,
+    y: px,
+    z: px,
+    perspective: px,
+    transformPerspective: px,
+    opacity: alpha,
+    originX: progressPercentage,
+    originY: progressPercentage,
+    originZ: px,
+};
+
+export { transformValueTypes };

package/dist/es/framer-motion/dist/es/render/dom/value-types/type-auto.mjs

@@ -0,0 +1,9 @@
+/**
+ * ValueType for "auto"
+ */
+const auto = {
+    test: (v) => v === "auto",
+    parse: (v) => v,
+};
+
+export { auto };

package/dist/es/framer-motion/dist/es/render/dom/value-types/type-int.mjs

@@ -0,0 +1,8 @@
+import { number } from '../../../value/types/numbers/index.mjs';
+
+const int = {
+    ...number,
+    transform: Math.round,
+};
+
+export { int };

package/dist/es/framer-motion/dist/es/render/dom/viewport/index.mjs

@@ -0,0 +1,43 @@
+import { resolveElements } from '../utils/resolve-element.mjs';
+
+const thresholds = {
+    some: 0,
+    all: 1,
+};
+function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "some" } = {}) {
+    const elements = resolveElements(elementOrSelector);
+    const activeIntersections = new WeakMap();
+    const onIntersectionChange = (entries) => {
+        entries.forEach((entry) => {
+            const onEnd = activeIntersections.get(entry.target);
+            /**
+             * If there's no change to the intersection, we don't need to
+             * do anything here.
+             */
+            if (entry.isIntersecting === Boolean(onEnd))
+                return;
+            if (entry.isIntersecting) {
+                const newOnEnd = onStart(entry);
+                if (typeof newOnEnd === "function") {
+                    activeIntersections.set(entry.target, newOnEnd);
+                }
+                else {
+                    observer.unobserve(entry.target);
+                }
+            }
+            else if (onEnd) {
+                onEnd(entry);
+                activeIntersections.delete(entry.target);
+            }
+        });
+    };
+    const observer = new IntersectionObserver(onIntersectionChange, {
+        root,
+        rootMargin,
+        threshold: typeof amount === "number" ? amount : thresholds[amount],
+    });
+    elements.forEach((element) => observer.observe(element));
+    return () => observer.disconnect();
+}
+
+export { inView };

package/dist/es/framer-motion/dist/es/render/html/HTMLVisualElement.mjs

@@ -0,0 +1,57 @@
+import { buildHTMLStyles } from './utils/build-styles.mjs';
+import { isCSSVariableName } from '../dom/utils/is-css-variable.mjs';
+import { transformProps } from './utils/transform.mjs';
+import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
+import { renderHTML } from './utils/render.mjs';
+import { getDefaultValueType } from '../dom/value-types/defaults.mjs';
+import { measureViewportBox } from '../../projection/utils/measure.mjs';
+import { DOMVisualElement } from '../dom/DOMVisualElement.mjs';
+import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
+
+function getComputedStyle(element) {
+    return window.getComputedStyle(element);
+}
+class HTMLVisualElement extends DOMVisualElement {
+    constructor() {
+        super(...arguments);
+        this.type = "html";
+        this.renderInstance = renderHTML;
+    }
+    readValueFromInstance(instance, key) {
+        if (transformProps.has(key)) {
+            const defaultType = getDefaultValueType(key);
+            return defaultType ? defaultType.default || 0 : 0;
+        }
+        else {
+            const computedStyle = getComputedStyle(instance);
+            const value = (isCSSVariableName(key)
+                ? computedStyle.getPropertyValue(key)
+                : computedStyle[key]) || 0;
+            return typeof value === "string" ? value.trim() : value;
+        }
+    }
+    measureInstanceViewportBox(instance, { transformPagePoint }) {
+        return measureViewportBox(instance, transformPagePoint);
+    }
+    build(renderState, latestValues, props) {
+        buildHTMLStyles(renderState, latestValues, props.transformTemplate);
+    }
+    scrapeMotionValuesFromProps(props, prevProps, visualElement) {
+        return scrapeMotionValuesFromProps(props, prevProps, visualElement);
+    }
+    handleChildMotionValue() {
+        if (this.childSubscription) {
+            this.childSubscription();
+            delete this.childSubscription;
+        }
+        const { children } = this.props;
+        if (isMotionValue(children)) {
+            this.childSubscription = children.on("change", (latest) => {
+                if (this.current)
+                    this.current.textContent = `${latest}`;
+            });
+        }
+    }
+}
+
+export { HTMLVisualElement, getComputedStyle };

package/dist/es/framer-motion/dist/es/render/html/config-motion.mjs

@@ -0,0 +1,12 @@
+import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
+import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
+import { createHtmlRenderState } from './utils/create-render-state.mjs';
+
+const htmlMotionConfig = {
+    useVisualState: makeUseVisualState({
+        scrapeMotionValuesFromProps,
+        createRenderState: createHtmlRenderState,
+    }),
+};
+
+export { htmlMotionConfig };

package/dist/es/framer-motion/dist/es/render/html/use-props.mjs

@@ -0,0 +1,57 @@
+import { useMemo } from 'react';
+import { isForcedMotionValue } from '../../motion/utils/is-forced-motion-value.mjs';
+import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
+import { buildHTMLStyles } from './utils/build-styles.mjs';
+import { createHtmlRenderState } from './utils/create-render-state.mjs';
+
+function copyRawValuesOnly(target, source, props) {
+    for (const key in source) {
+        if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
+            target[key] = source[key];
+        }
+    }
+}
+function useInitialMotionValues({ transformTemplate }, visualState) {
+    return useMemo(() => {
+        const state = createHtmlRenderState();
+        buildHTMLStyles(state, visualState, transformTemplate);
+        return Object.assign({}, state.vars, state.style);
+    }, [visualState]);
+}
+function useStyle(props, visualState) {
+    const styleProp = props.style || {};
+    const style = {};
+    /**
+     * Copy non-Motion Values straight into style
+     */
+    copyRawValuesOnly(style, styleProp, props);
+    Object.assign(style, useInitialMotionValues(props, visualState));
+    return style;
+}
+function useHTMLProps(props, visualState) {
+    // The `any` isn't ideal but it is the type of createElement props argument
+    const htmlProps = {};
+    const style = useStyle(props, visualState);
+    if (props.drag && props.dragListener !== false) {
+        // Disable the ghost element when a user drags
+        htmlProps.draggable = false;
+        // Disable text selection
+        style.userSelect =
+            style.WebkitUserSelect =
+                style.WebkitTouchCallout =
+                    "none";
+        // Disable scrolling on the draggable direction
+        style.touchAction =
+            props.drag === true
+                ? "none"
+                : `pan-${props.drag === "x" ? "y" : "x"}`;
+    }
+    if (props.tabIndex === undefined &&
+        (props.onTap || props.onTapStart || props.whileTap)) {
+        htmlProps.tabIndex = 0;
+    }
+    htmlProps.style = style;
+    return htmlProps;
+}
+
+export { copyRawValuesOnly, useHTMLProps };