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

A simple and powerful JavaScript animation library

{"version":3,"file":"use-props.mjs","sources":["../../../../src/render/html/use-props.ts"],"sourcesContent":["\"use client\"\n\nimport { AnyResolvedKeyframe, isMotionValue, MotionValue } from \"motion-dom\"\nimport { HTMLProps, useMemo } from \"react\"\nimport { MotionProps } from \"../../motion/types\"\nimport { isForcedMotionValue } from \"../../motion/utils/is-forced-motion-value\"\nimport { ResolvedValues } from \"../types\"\nimport { buildHTMLStyles } from \"./utils/build-styles\"\nimport { createHtmlRenderState } from \"./utils/create-render-state\"\n\nexport function copyRawValuesOnly(\n    target: ResolvedValues,\n    source: { [key: string]: AnyResolvedKeyframe | MotionValue },\n    props: MotionProps\n) {\n    for (const key in source) {\n        if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {\n            target[key] = source[key] as AnyResolvedKeyframe\n        }\n    }\n}\n\nfunction useInitialMotionValues(\n    { transformTemplate }: MotionProps,\n    visualState: ResolvedValues\n) {\n    return useMemo(() => {\n        const state = createHtmlRenderState()\n\n        buildHTMLStyles(state, visualState, transformTemplate)\n\n        return Object.assign({}, state.vars, state.style)\n    }, [visualState])\n}\n\nfunction useStyle(\n    props: MotionProps,\n    visualState: ResolvedValues\n): ResolvedValues {\n    const styleProp = props.style || {}\n    const style = {}\n\n    /**\n     * Copy non-Motion Values straight into style\n     */\n    copyRawValuesOnly(style, styleProp as any, props)\n\n    Object.assign(style, useInitialMotionValues(props, visualState))\n\n    return style\n}\n\nexport function useHTMLProps(\n    props: MotionProps & HTMLProps<HTMLElement>,\n    visualState: ResolvedValues\n) {\n    // The `any` isn't ideal but it is the type of createElement props argument\n    const htmlProps: any = {}\n    const style = useStyle(props, visualState)\n\n    if (props.drag && props.dragListener !== false) {\n        // Disable the ghost element when a user drags\n        htmlProps.draggable = false\n\n        // Disable text selection\n        style.userSelect =\n            style.WebkitUserSelect =\n            style.WebkitTouchCallout =\n                \"none\"\n\n        // Disable scrolling on the draggable direction\n        style.touchAction =\n            props.drag === true\n                ? \"none\"\n                : `pan-${props.drag === \"x\" ? \"y\" : \"x\"}`\n    }\n\n    if (\n        props.tabIndex === undefined &&\n        (props.onTap || props.onTapStart || props.whileTap)\n    ) {\n        htmlProps.tabIndex = 0\n    }\n\n    htmlProps.style = style\n\n    return htmlProps\n}\n"],"names":[],"mappings":";;;;;;;;AAeI;AACI;;;;AAIR;AAEA;;AAKQ;AAEA;AAEA;AACJ;AACJ;AAEA;AAII;;AAGA;;AAEG;AACH;AAEA;AAEA;AACJ;AAEgB;;;;;;AAUR;;AAGA;AACI;AACA;AACI;;AAGR;;AAEQ;AACA;;AAGZ;AAEI;AAEA;;AAGJ;AAEA;AACJ;;"}