{"version":3,"file":"filter-props.mjs","sources":["../../../../../src/render/dom/utils/filter-props.ts"],"sourcesContent":["import type { MotionProps } from \"../../../motion/types\"\nimport { isValidMotionProp } from \"../../../motion/utils/valid-prop\"\n\nlet shouldForward = (key: string) => !isValidMotionProp(key)\n\nexport type IsValidProp = (key: string) => boolean\n\nexport function loadExternalIsValidProp(isValidProp?: IsValidProp) {\n    if (typeof isValidProp !== \"function\") return\n\n    // Explicitly filter our events\n    shouldForward = (key: string) =>\n        key.startsWith(\"on\") ? !isValidMotionProp(key) : isValidProp(key)\n}\n\n/**\n * Emotion and Styled Components both allow users to pass through arbitrary props to their components\n * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which\n * of these should be passed to the underlying DOM node.\n *\n * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props\n * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props\n * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of\n * `@emotion/is-prop-valid`, however to fix this problem we need to use it.\n *\n * By making it an optionalDependency we can offer this functionality only in the situations where it's\n * actually required.\n */\ntry {\n    /**\n     * We attempt to import this package but require won't be defined in esm environments, in that case\n     * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed\n     * in favour of explicit injection.\n     */\n    loadExternalIsValidProp(require(\"@emotion/is-prop-valid\").default)\n} catch {\n    // We don't need to actually do anything here - the fallback is the existing `isPropValid`.\n}\n\nexport function filterProps(\n    props: MotionProps,\n    isDom: boolean,\n    forwardMotionProps: boolean\n) {\n    const filteredProps: MotionProps = {}\n\n    for (const key in props) {\n        /**\n         * values is considered a valid prop by Emotion, so if it's present\n         * this will be rendered out to the DOM unless explicitly filtered.\n         *\n         * We check the type as it could be used with the `feColorMatrix`\n         * element, which we support.\n         */\n        if (key === \"values\" && typeof props.values === \"object\") continue\n\n        if (\n            shouldForward(key) ||\n            (forwardMotionProps === true && isValidMotionProp(key)) ||\n            (!isDom && !isValidMotionProp(key)) ||\n            // If trying to use native HTML drag events, forward drag listeners\n            (props[\"draggable\" as keyof MotionProps] &&\n                key.startsWith(\"onDrag\"))\n        ) {\n            filteredProps[key as keyof MotionProps] =\n                props[key as keyof MotionProps]\n        }\n    }\n\n    return filteredProps\n}\n"],"names":[],"mappings":";;AAGA,IAAI,aAAa,GAAG,CAAC,GAAW,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC;AAItD,SAAU,uBAAuB,CAAC,WAAyB,EAAA;IAC7D,IAAI,OAAO,WAAW,KAAK,UAAU;QAAE;;IAGvC,aAAa,GAAG,CAAC,GAAW,KACxB,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC;AACzE;AAEA;;;;;;;;;;;;AAYG;AACH,IAAI;AACA;;;;AAIG;IACH,uBAAuB,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC;AACtE;AAAE,MAAM;;AAER;SAEgB,WAAW,CACvB,KAAkB,EAClB,KAAc,EACd,kBAA2B,EAAA;IAE3B,MAAM,aAAa,GAAgB,EAAE;AAErC,IAAA,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE;AACrB;;;;;;AAMG;QACH,IAAI,GAAG,KAAK,QAAQ,IAAI,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ;YAAE;QAE1D,IACI,aAAa,CAAC,GAAG,CAAC;aACjB,kBAAkB,KAAK,IAAI,IAAI,iBAAiB,CAAC,GAAG,CAAC,CAAC;aACtD,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;;aAElC,KAAK,CAAC,WAAgC,CAAC;AACpC,gBAAA,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,EAC/B;YACE,aAAa,CAAC,GAAwB,CAAC;gBACnC,KAAK,CAAC,GAAwB,CAAC;QACvC;IACJ;AAEA,IAAA,OAAO,aAAa;AACxB;;;;"}