framer-motion/dist/es/motion/index.mjs.map

A simple and powerful JavaScript animation library

{"version":3,"file":"index.mjs","sources":["../../../src/motion/index.tsx"],"sourcesContent":["\"use client\"\n\nimport { rootProjectionNode } from \"motion-dom\"\nimport { invariant, warnOnce } from \"motion-utils\"\nimport * as React from \"react\"\nimport { forwardRef, useContext } from \"react\"\nimport { LayoutGroupContext } from \"../context/LayoutGroupContext\"\nimport { LazyContext } from \"../context/LazyContext\"\nimport { MotionConfigContext } from \"../context/MotionConfigContext\"\nimport { MotionContext } from \"../context/MotionContext\"\nimport { useCreateMotionContext } from \"../context/MotionContext/create\"\nimport { DOMMotionComponents } from \"../render/dom/types\"\nimport { useRender } from \"../render/dom/use-render\"\nimport { isSVGComponent } from \"../render/dom/utils/is-svg-component\"\nimport { HTMLRenderState } from \"../render/html/types\"\nimport { useHTMLVisualState } from \"../render/html/use-html-visual-state\"\nimport { SVGRenderState } from \"../render/svg/types\"\nimport { useSVGVisualState } from \"../render/svg/use-svg-visual-state\"\nimport { CreateVisualElement } from \"../render/types\"\nimport { useConstant } from \"../utils/use-constant\"\nimport { getInitializedFeatureDefinitions } from \"./features/definitions\"\nimport { loadFeatures } from \"./features/load-features\"\nimport { FeatureBundle, FeaturePackages } from \"./features/types\"\nimport { MotionProps } from \"./types\"\nimport { motionComponentSymbol } from \"./utils/symbol\"\nimport { useMotionRef } from \"./utils/use-motion-ref\"\nimport { useVisualElement } from \"./utils/use-visual-element\"\n\nexport interface MotionComponentConfig<\n    TagName extends keyof DOMMotionComponents | string = \"div\"\n> {\n    preloadedFeatures?: FeatureBundle\n    createVisualElement?: CreateVisualElement\n    Component: TagName | React.ComponentType<React.PropsWithChildren<unknown>>\n    forwardMotionProps?: boolean\n}\n\nexport type MotionComponentProps<Props> = {\n    [K in Exclude<keyof Props, keyof MotionProps>]?: Props[K]\n} & MotionProps\n\nexport type MotionComponent<T, P> = T extends keyof DOMMotionComponents\n    ? DOMMotionComponents[T]\n    : React.ComponentType<\n          Omit<MotionComponentProps<P>, \"children\"> & {\n              children?: \"children\" extends keyof P\n                  ? P[\"children\"] | MotionComponentProps<P>[\"children\"]\n                  : MotionComponentProps<P>[\"children\"]\n          }\n      >\n\nexport interface MotionComponentOptions {\n    forwardMotionProps?: boolean\n    /**\n     * Specify whether the component renders an HTML or SVG element.\n     * This is useful when wrapping custom SVG components that need\n     * SVG-specific attribute handling (like viewBox animation).\n     * By default, Motion auto-detects based on the component name,\n     * but custom React components are always treated as HTML.\n     */\n    type?: \"html\" | \"svg\"\n}\n\n/**\n * Create a `motion` component.\n *\n * This function accepts a Component argument, which can be either a string (ie \"div\"\n * for `motion.div`), or an actual React component.\n *\n * Alongside this is a config option which provides a way of rendering the provided\n * component \"offline\", or outside the React render cycle.\n */\nexport function createMotionComponent<\n    Props,\n    TagName extends keyof DOMMotionComponents | string = \"div\"\n>(\n    Component: TagName | string | React.ComponentType<Props>,\n    { forwardMotionProps = false, type }: MotionComponentOptions = {},\n    preloadedFeatures?: FeaturePackages,\n    createVisualElement?: CreateVisualElement<Props, TagName>\n) {\n    preloadedFeatures && loadFeatures(preloadedFeatures)\n\n    /**\n     * Determine whether to use SVG or HTML rendering based on:\n     * 1. Explicit `type` option (highest priority)\n     * 2. Auto-detection via `isSVGComponent`\n     */\n    const isSVG = type ? type === \"svg\" : isSVGComponent(Component)\n    const useVisualState = isSVG ? useSVGVisualState : useHTMLVisualState\n\n    function MotionDOMComponent(\n        props: MotionComponentProps<Props>,\n        externalRef?: React.Ref<HTMLElement | SVGElement>\n    ) {\n        /**\n         * If we need to measure the element we load this functionality in a\n         * separate class component in order to gain access to getSnapshotBeforeUpdate.\n         */\n        let MeasureLayout: undefined | React.ComponentType<MotionProps>\n\n        const layoutId = useLayoutId(props)\n\n        /**\n         * An element that mounts with the layoutId of one that's already\n         * rendered takes over from it with a shared layout animation, so\n         * visually it has already entered. Mount it as if initial={false}\n         * rather than replaying its entrance.\n         *\n         * Only when it has an initial: without one there's no entrance to\n         * skip, and initial={false} would make its animate values its base\n         * values, so removing them later wouldn't return it to its defaults.\n         */\n        if (\n            useConstant(\n                () =>\n                    !!rootProjectionNode.current?.sharedNodes.get(layoutId!)\n                        ?.lead && props.initial\n            )\n        ) {\n            props = { ...props, initial: false }\n        }\n\n        const configAndProps = {\n            ...useContext(MotionConfigContext),\n            ...props,\n            layoutId,\n        }\n\n        const { isStatic, isValidProp } = configAndProps\n\n        const context = useCreateMotionContext<HTMLElement | SVGElement>(props)\n\n        const visualState = useVisualState(props, isStatic)\n\n        if (!isStatic && typeof window !== \"undefined\") {\n            useStrictMode(configAndProps, preloadedFeatures)\n\n            const layoutProjection = getProjectionFunctionality(configAndProps)\n\n            /**\n             * Create a VisualElement for this component. A VisualElement provides a common\n             * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as\n             * providing a way of rendering to these APIs outside of the React render loop\n             * for more performant animations and interactions\n             */\n            context.visualElement = useVisualElement(\n                Component,\n                visualState,\n                configAndProps,\n                createVisualElement,\n                layoutProjection.ProjectionNode,\n                isSVG\n            )\n\n            /**\n             * Keep measuring for the render that removes a layoutId, so the\n             * node can leave its stack.\n             */\n            if (\n                layoutProjection.isEnabled ||\n                context.visualElement?.projection?.options.layoutId\n            )\n                MeasureLayout = layoutProjection.MeasureLayout\n        }\n\n        /**\n         * The mount order and hierarchy is specific to ensure our element ref\n         * is hydrated by the time features fire their effects.\n         */\n        return (\n            <MotionContext.Provider value={context}>\n                {MeasureLayout && context.visualElement ? (\n                    <MeasureLayout\n                        visualElement={context.visualElement}\n                        {...configAndProps}\n                    />\n                ) : null}\n                {useRender<Props, TagName>(\n                    Component,\n                    props,\n                    useMotionRef<\n                        HTMLElement | SVGElement,\n                        HTMLRenderState | SVGRenderState\n                    >(visualState, context.visualElement, externalRef),\n                    visualState,\n                    isStatic,\n                    forwardMotionProps,\n                    isSVG,\n                    isValidProp\n                )}\n            </MotionContext.Provider>\n        )\n    }\n\n    MotionDOMComponent.displayName = `motion.${\n        typeof Component === \"string\"\n            ? Component\n            : `create(${Component.displayName ?? Component.name ?? \"\"})`\n    }`\n\n    const ForwardRefMotionComponent = forwardRef(MotionDOMComponent as any)\n    ;(ForwardRefMotionComponent as any)[motionComponentSymbol] = Component\n\n    return ForwardRefMotionComponent as MotionComponent<TagName, Props>\n}\n\nfunction useLayoutId({ layoutId }: MotionProps) {\n    const layoutGroupId = useContext(LayoutGroupContext).id\n    return layoutGroupId && layoutId !== undefined\n        ? layoutGroupId + \"-\" + layoutId\n        : layoutId\n}\n\nfunction useStrictMode(\n    configAndProps: MotionProps,\n    preloadedFeatures?: FeaturePackages\n) {\n    const isStrict = useContext(LazyContext).strict\n\n    /**\n     * If we're in development mode, check to make sure we're not rendering a motion component\n     * as a child of LazyMotion, as this will break the file-size benefits of using it.\n     */\n    if (\n        process.env.NODE_ENV !== \"production\" &&\n        preloadedFeatures &&\n        isStrict\n    ) {\n        const strictMessage =\n            \"You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead\"\n\n        /**\n         * `ignoreStrict` is set by the main `Reorder`, which renders `motion`\n         * on every render of every item, so warn once and point to the\n         * `Reorder` that renders `m`.\n         */\n        configAndProps.ignoreStrict\n            ? warnOnce(\n                  false,\n                  strictMessage +\n                      '. For Reorder, import it from \"motion/react-m\"',\n                  \"lazy-strict-mode\"\n              )\n            : invariant(false, strictMessage, \"lazy-strict-mode\")\n    }\n}\n\nfunction getProjectionFunctionality(props: MotionProps) {\n    const featureDefinitions = getInitializedFeatureDefinitions()\n    const { drag, layout } = featureDefinitions\n\n    if (!drag && !layout) return {}\n\n    const combined = { ...drag, ...layout }\n\n    return {\n        MeasureLayout: combined.MeasureLayout,\n        isEnabled: drag?.isEnabled(props) || layout?.isEnabled(props),\n        ProjectionNode: combined.ProjectionNode,\n    }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+DA;;;;;;;;AAQG;;AAUC;AAEA;;;;AAIG;AACH;;AAGA;AAII;;;AAGG;AACH;AAEA;AAEA;;;;;;;;;AASG;AACH;AAIgB;;;AAMhB;;AAEI;;;AAIJ;AAEA;;;AAKI;AAEA;AAEA;;;;;AAKG;AACH;AASA;;;AAGG;;AAGC;AAEA;;AAGR;;;AAGG;AACH;;AAyBJ;AAEQ;AACA;AAGR;AACE;AAEF;AACJ;AAEA;;AAEI;AACI;;AAER;AAEA;;AAMI;;;AAGG;AACH;;AAGI;;AAKA;;;;AAIG;AACH;AACI;;;;AAQZ;AAEA;AACI;AACA;AAEA;AAAsB;;;;AAMlB;;;AAGR;;"}