Merge branch 'main' into fix/layout-scroll-root

framer · Jun 27, 2022 · adae211 · adae211
2 parents 665af99 + 7da1247
commit adae211
Show file tree

Hide file tree

Showing 23 changed files with 53 additions and 43 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,26 @@
 
 Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
+Undocumented APIs should be considered internal and may change without warning.
+
+## [6.3.16] 2022-06-27
+
+### Fixed
+
+-   Fixing layout animations within `position: fixed` elements. Provide `position: fixed` elements the `layoutScroll` prop to fix.
+
+## [6.3.15] 2022-06-24
+
+### Fixed
+
+-   Explicitly declaring `children` prop for components.
+
+## [6.3.14] 2022-06-24
+
+### Fixed
+
+-   Exposing more internal types.
+
 ## [6.3.13] 2022-06-22
 
 ### Fixed

diff --git a/dev/package.json b/dev/package.json
@@ -1,15 +1,15 @@
 {
     "name": "framer-motion--dev",
-    "version": "6.3.13",
+    "version": "6.3.15",
     "private": true,
     "scripts": {
         "dev": "webpack serve --config ./webpack/config.js --hot"
     },
     "dependencies": {
         "@react-three/drei": "^7.27.3",
         "@react-three/fiber": "^7.0.24",
-        "framer-motion": "^6.3.13",
-        "framer-motion-3d": "^6.3.13",
+        "framer-motion": "^6.3.15",
+        "framer-motion-3d": "^6.3.15",
         "path-browserify": "^1.0.1",
         "popmotion": "11.0.3",
         "react": "^17.0.2",

diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-    "version": "6.3.13",
+    "version": "6.3.15",
     "packages": [
         "packages/*"
     ],

diff --git a/packages/framer-motion-3d/package.json b/packages/framer-motion-3d/package.json
@@ -1,6 +1,6 @@
 {
     "name": "framer-motion-3d",
-    "version": "6.3.13",
+    "version": "6.3.15",
     "description": "A simple and powerful React animation library for @react-three/fiber",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -48,7 +48,7 @@
         "postpublish": "git push --tags"
     },
     "dependencies": {
-        "framer-motion": "^6.3.13",
+        "framer-motion": "^6.3.15",
         "react-merge-refs": "^1.1.0"
     },
     "peerDependencies": {

diff --git a/packages/framer-motion-3d/src/utils/use-time.ts b/packages/framer-motion-3d/src/utils/use-time.ts
@@ -4,7 +4,7 @@ import { useContext } from "react"
 
 export function useTime() {
     const time = useMotionValue(0)
-    const isStatic = useContext(MotionConfigContext)["isStatic"] // Internal API
+    const { isStatic } = useContext(MotionConfigContext)
 
     !isStatic && useFrame((state) => time.set(state.clock.getElapsedTime()))
 

diff --git a/packages/framer-motion/package.json b/packages/framer-motion/package.json
@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "6.3.13",
+    "version": "6.3.15",
     "description": "A simple and powerful React animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",

diff --git a/packages/framer-motion/src/components/AnimatePresence/index.tsx b/packages/framer-motion/src/components/AnimatePresence/index.tsx
@@ -75,9 +75,7 @@ function onlyElements(children: ReactNode): ReactElement<any>[] {
  *
  * @public
  */
-export const AnimatePresence: React.FunctionComponent<
-    React.PropsWithChildren<AnimatePresenceProps>
-> = ({
+export const AnimatePresence: React.FunctionComponent<React.PropsWithChildren<AnimatePresenceProps>> = ({
     children,
     custom,
     initial = true,

diff --git a/packages/framer-motion/src/components/AnimatePresence/types.ts b/packages/framer-motion/src/components/AnimatePresence/types.ts
@@ -56,10 +56,8 @@ export interface AnimatePresenceProps {
     exitBeforeEnter?: boolean
 
     /**
-     * Used in Framer to flag that sibling children *shouldn't* re-render as a result of a
+     * Internal. Used in Framer to flag that sibling children *shouldn't* re-render as a result of a
      * child being removed.
-     *
-     * @internal
      */
     presenceAffectsLayout?: boolean
 }
diff --git a/packages/framer-motion/src/components/AnimateSharedLayout.tsx b/packages/framer-motion/src/components/AnimateSharedLayout.tsx
@@ -4,7 +4,7 @@ import { useConstant } from "../utils/use-constant"
 import { LayoutGroup } from "./LayoutGroup"
 
 let id = 0
-export const AnimateSharedLayout: React.FunctionComponent = ({
+export const AnimateSharedLayout: React.FunctionComponent<React.PropsWithChildren<unknown>> = ({
     children,
 }: React.PropsWithChildren<{}>) => {
     React.useEffect(() => {

diff --git a/packages/framer-motion/src/components/Reorder/Group.tsx b/packages/framer-motion/src/components/Reorder/Group.tsx
@@ -71,9 +71,7 @@ export function ReorderGroup<V>(
     }: Props<V> & HTMLMotionProps<any> & React.PropsWithChildren<{}>,
     externalRef?: React.Ref<any>
 ) {
-    const Component = useConstant(() => motion(as)) as FunctionComponent<
-        HTMLMotionProps<any> & { ref?: React.Ref<any> }
-    >
+    const Component = useConstant(() => motion(as)) as FunctionComponent<React.PropsWithChildren<HTMLMotionProps<any> & { ref?: React.Ref<any> }>>
 
     const order: ItemData<V>[] = []
     const isReordering = useRef(false)

diff --git a/packages/framer-motion/src/components/Reorder/Item.tsx b/packages/framer-motion/src/components/Reorder/Item.tsx
@@ -57,9 +57,7 @@ export function ReorderItem<V>(
     }: Props<V> & HTMLMotionProps<any> & React.PropsWithChildren<{}>,
     externalRef?: React.Ref<any>
 ) {
-    const Component = useConstant(() => motion(as)) as FunctionComponent<
-        HTMLMotionProps<any> & { ref?: React.Ref<any> }
-    >
+    const Component = useConstant(() => motion(as)) as FunctionComponent<React.PropsWithChildren<HTMLMotionProps<any> & { ref?: React.Ref<any> }>>
 
     const context = useContext(ReorderContext)
     const point = {

diff --git a/packages/framer-motion/src/context/MotionConfigContext.tsx b/packages/framer-motion/src/context/MotionConfigContext.tsx
@@ -7,15 +7,13 @@ import { Transition } from "../types"
  */
 export interface MotionConfigContext {
     /**
-     * @internal
+     * Internal, exported only for usage in Framer
      */
     transformPagePoint: TransformPoint
 
     /**
-     * Determines whether this is a static context ie the Framer canvas. If so,
+     * Internal. Determines whether this is a static context ie the Framer canvas. If so,
      * it'll disable all dynamic functionality.
-     *
-     * @internal
      */
     isStatic: boolean
 

diff --git a/packages/framer-motion/src/context/SwitchLayoutGroupContext.ts b/packages/framer-motion/src/context/SwitchLayoutGroupContext.ts
@@ -23,7 +23,7 @@ export type InitialPromotionConfig = {
 }
 
 /**
- * @internal
+ * Internal, exported only for usage in Framer
  */
 export const SwitchLayoutGroupContext = createContext<SwitchLayoutGroupContext>(
     {}

diff --git a/packages/framer-motion/src/motion/features/types.ts b/packages/framer-motion/src/motion/features/types.ts
@@ -22,7 +22,7 @@ export type FeatureNames = {
     measureLayout: true
 }
 
-export type FeatureComponent = React.ComponentType<FeatureProps>
+export type FeatureComponent = React.ComponentType<React.PropsWithChildren<FeatureProps>>
 
 /**
  * @public
@@ -60,7 +60,7 @@ export type LoadedFeatures = FeatureDefinitions & {
 }
 
 export type RenderComponent<Instance, RenderState> = (
-    Component: string | React.ComponentType,
+    Component: string | React.ComponentType<React.PropsWithChildren<unknown>>,
     props: MotionProps,
     projectionId: number | undefined,
     ref: React.Ref<Instance>,

diff --git a/packages/framer-motion/src/motion/index.tsx b/packages/framer-motion/src/motion/index.tsx
@@ -23,7 +23,7 @@ export interface MotionComponentConfig<Instance, RenderState> {
     projectionNodeConstructor?: any
     useRender: RenderComponent<Instance, RenderState>
     useVisualState: UseVisualState<Instance, RenderState>
-    Component: string | React.ComponentType
+    Component: string | React.ComponentType<React.PropsWithChildren<unknown>>
 }
 
 /**

diff --git a/packages/framer-motion/src/motion/types.ts b/packages/framer-motion/src/motion/types.ts
@@ -319,6 +319,8 @@ export interface MotionProps
     ): string
 
     /**
+     * Internal.
+     *
      * This allows values to be transformed before being animated or set as styles.
      *
      * For instance, this allows custom values in Framer Library like `size` to be converted into `width` and `height`.
@@ -329,8 +331,6 @@ export interface MotionProps
      * - Extract `CustomValueType` as a separate user-defined type (delete `CustomValueType` and animate a `Color` - does this throw a type error?).
      *
      * @param values -
-     *
-     * @internal
      */
     transformValues?<V extends ResolvedValues>(values: V): V
 }

diff --git a/packages/framer-motion/src/motion/utils/use-visual-element.ts b/packages/framer-motion/src/motion/utils/use-visual-element.ts
@@ -11,7 +11,7 @@ import { MotionConfigProps } from "../../components/MotionConfig"
 import { useReducedMotionConfig } from "../../utils/use-reduced-motion"
 
 export function useVisualElement<Instance, RenderState>(
-    Component: string | React.ComponentType,
+    Component: string | React.ComponentType<React.PropsWithChildren<unknown>>,
     visualState: VisualState<Instance, RenderState>,
     props: MotionProps & MotionConfigProps,
     createVisualElement?: CreateVisualElement<Instance>

diff --git a/packages/framer-motion/src/render/dom/create-visual-element.ts b/packages/framer-motion/src/render/dom/create-visual-element.ts
@@ -7,7 +7,7 @@ import { isSVGComponent } from "./utils/is-svg-component"
 export const createDomVisualElement: CreateVisualElement<
     HTMLElement | SVGElement
 > = (
-    Component: string | ComponentType,
+    Component: string | ComponentType<React.PropsWithChildren<unknown>>,
     options: VisualElementOptions<HTMLElement | SVGElement>
 ) => {
     return isSVGComponent(Component)

diff --git a/packages/framer-motion/src/render/dom/motion-proxy.ts b/packages/framer-motion/src/render/dom/motion-proxy.ts
@@ -20,7 +20,7 @@ export interface CustomMotionComponentConfig {
 }
 
 export type CreateConfig = <Instance, RenderState, Props>(
-    Component: string | React.ComponentType<Props>,
+    Component: string | React.ComponentType<React.PropsWithChildren<Props>>,
     config: CustomMotionComponentConfig
 ) => MotionComponentConfig<Instance, RenderState>
 
@@ -40,7 +40,7 @@ export type CreateConfig = <Instance, RenderState, Props>(
  */
 export function createMotionProxy(createConfig: CreateConfig) {
     function custom<Props>(
-        Component: string | React.ComponentType<Props>,
+        Component: string | React.ComponentType<React.PropsWithChildren<Props>>,
         customMotionComponentConfig: CustomMotionComponentConfig = {}
     ): CustomDomComponent<Props> {
         return createMotionComponent<

diff --git a/packages/framer-motion/src/render/dom/utils/create-config.ts b/packages/framer-motion/src/render/dom/utils/create-config.ts
@@ -11,7 +11,7 @@ import { CreateVisualElement } from "../../types"
 import { CustomMotionComponentConfig } from "../motion-proxy"
 
 export function createDomMotionConfig<Props>(
-    Component: string | React.ComponentType<Props>,
+    Component: string | React.ComponentType<React.PropsWithChildren<Props>>,
     { forwardMotionProps = false }: CustomMotionComponentConfig,
     preloadedFeatures?: FeatureComponents,
     createVisualElement?: CreateVisualElement<any>,

diff --git a/packages/framer-motion/src/render/dom/utils/is-svg-component.ts b/packages/framer-motion/src/render/dom/utils/is-svg-component.ts
@@ -1,7 +1,7 @@
 import { ComponentType } from "react"
 import { lowercaseSVGElements } from "../../svg/lowercase-elements"
 
-export function isSVGComponent(Component: string | ComponentType) {
+export function isSVGComponent(Component: string | ComponentType<React.PropsWithChildren<unknown>>) {
     if (
         /**
          * If it's not a string, it's a custom React component. Currently we only support

diff --git a/packages/framer-motion/src/render/types.ts b/packages/framer-motion/src/render/types.ts
@@ -159,7 +159,7 @@ export type VisualElementOptions<Instance, RenderState = any> = {
 }
 
 export type CreateVisualElement<Instance> = (
-    Component: string | React.ComponentType,
+    Component: string | React.ComponentType<React.PropsWithChildren<unknown>>,
     options: VisualElementOptions<Instance>
 ) => VisualElement<Instance>
 

diff --git a/yarn.lock b/yarn.lock
@@ -7599,8 +7599,8 @@ __metadata:
     cache-loader: ^1.2.5
     convert-tsconfig-paths-to-webpack-aliases: ^0.9.2
     fork-ts-checker-webpack-plugin: ^6.2.0
-    framer-motion: ^6.3.13
-    framer-motion-3d: ^6.3.13
+    framer-motion: ^6.3.15
+    framer-motion-3d: ^6.3.15
     path-browserify: ^1.0.1
     popmotion: 11.0.3
     react: ^17.0.2
@@ -7666,7 +7666,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"framer-motion-3d@^6.3.13, framer-motion-3d@workspace:packages/framer-motion-3d":
+"framer-motion-3d@^6.3.15, framer-motion-3d@workspace:packages/framer-motion-3d":
   version: 0.0.0-use.local
   resolution: "framer-motion-3d@workspace:packages/framer-motion-3d"
   dependencies:
@@ -7682,7 +7682,7 @@ __metadata:
     "@types/react-dom": ^17.0.11
     bundlesize: ^0.18.0
     convert-tsconfig-paths-to-webpack-aliases: ^0.9.2
-    framer-motion: ^6.3.13
+    framer-motion: ^6.3.15
     jest: ^24.8.0
     jest-dom: ^3.5.0
     jest-junit: ^6.4.0
@@ -7709,7 +7709,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"framer-motion@^6.3.13, framer-motion@workspace:packages/framer-motion":
+"framer-motion@^6.3.15, framer-motion@workspace:packages/framer-motion":
   version: 0.0.0-use.local
   resolution: "framer-motion@workspace:packages/framer-motion"
   dependencies: