refactor: remove unused framer features

.changeset/slow-dolphins-cross.md

@@ -0,0 +1,6 @@
+---
+"@chakra-ui/react": patch
+---
+
+Changes the motion import to the more lightweight m component in framer motion
+to only load the required features.

packages/components/src/dialog/dialog-overlay.tsx

@@ -1,10 +1,10 @@
 import { cx } from "@chakra-ui/utils/cx"
-import { HTMLMotionProps, motion } from "framer-motion"
+import { HTMLMotionProps, m, LazyMotion, domAnimation } from "framer-motion"
 import { ChakraProps, chakra, forwardRef } from "../system"
 import { fadeConfig } from "../transition"
 import { useDialogContext, useDialogStyles } from "./dialog-context"
 
-const StyledDiv = chakra(motion.div)
+const StyledDiv = chakra(m.div)
 
 export interface DialogOverlayProps
   extends Omit<HTMLMotionProps<"div">, "color" | "transition">,
@@ -25,13 +25,15 @@ export const DialogOverlay = forwardRef<DialogOverlayProps, "div">(
     const motionProps: any = _motionProps || defaultMotionProps
 
     return (
-      <StyledDiv
-        {...motionProps}
-        {...rest}
-        __css={styles.overlay}
-        ref={ref}
-        className={cx("chakra-dialog__overlay", props.className)}
-      />
+      <LazyMotion features={domAnimation}>
+        <StyledDiv
+          {...motionProps}
+          {...rest}
+          __css={styles.overlay}
+          ref={ref}
+          className={cx("chakra-dialog__overlay", props.className)}
+        />
+      </LazyMotion>
     )
   },
 )

packages/components/src/dialog/dialog-transition.tsx

@@ -1,4 +1,4 @@
-import { HTMLMotionProps, motion } from "framer-motion"
+import { HTMLMotionProps, LazyMotion, domAnimation, m } from "framer-motion"
 import { forwardRef } from "react"
 import { ChakraProps, chakra } from "../system"
 import { scaleFadeConfig, slideFadeConfig } from "../transition"
@@ -35,7 +35,7 @@ const transitions = {
   none: {},
 }
 
-const StyledSection = chakra(motion.section)
+const StyledSection = chakra(m.section)
 
 const getMotionProps = (preset: DialogTransitionProps["preset"]) => {
   return transitions[preset || "none"]
@@ -44,7 +44,11 @@ const getMotionProps = (preset: DialogTransitionProps["preset"]) => {
 export const DialogTransition = forwardRef(
   (props: DialogTransitionProps, ref: React.Ref<any>) => {
     const { preset, motionProps = getMotionProps(preset), ...restProps } = props
-    return <StyledSection ref={ref} {...(motionProps as any)} {...restProps} />
+    return (
+      <LazyMotion features={domAnimation}>
+        <StyledSection ref={ref} {...(motionProps as any)} {...restProps} />
+      </LazyMotion>
+    )
   },
 )
 

packages/components/src/menu/menu-content.tsx

@@ -1,6 +1,12 @@
 import { callAll } from "@chakra-ui/utils/call-all"
 import { cx } from "@chakra-ui/utils/cx"
-import { HTMLMotionProps, motion, Variants } from "framer-motion"
+import {
+  domAnimation,
+  HTMLMotionProps,
+  LazyMotion,
+  m,
+  Variants,
+} from "framer-motion"
 import { chakra, forwardRef, HTMLChakraProps } from "../system"
 import { useMenuContext, useMenuStyles } from "./menu-context"
 import { useMenuContent } from "./use-menu"
@@ -35,7 +41,7 @@ const motionVariants: Variants = {
   },
 }
 
-const StyledDiv = chakra(motion.div)
+const StyledDiv = chakra(m.div)
 
 export const MenuContent = forwardRef<MenuContentProps, "div">(
   function MenuContent(props, ref) {
@@ -47,20 +53,22 @@ export const MenuContent = forwardRef<MenuContentProps, "div">(
     const contentProps = useMenuContent(restProps, ref) as any
 
     return (
-      <StyledDiv
-        variants={motionVariants}
-        initial={false}
-        animate={api.isOpen ? "enter" : "exit"}
-        __css={styles.content}
-        {...motionProps}
-        {...contentProps}
-        className={cx("chakra-menu__menu-list", props.className)}
-        onUpdate={api.onTransitionEnd}
-        onAnimationComplete={callAll(
-          api.unstable__animationState.onComplete,
-          contentProps.onAnimationComplete,
-        )}
-      />
+      <LazyMotion features={domAnimation}>
+        <StyledDiv
+          variants={motionVariants}
+          initial={false}
+          animate={api.isOpen ? "enter" : "exit"}
+          __css={styles.content}
+          {...motionProps}
+          {...contentProps}
+          className={cx("chakra-menu__menu-list", props.className)}
+          onUpdate={api.onTransitionEnd}
+          onAnimationComplete={callAll(
+            api.unstable__animationState.onComplete,
+            contentProps.onAnimationComplete,
+          )}
+        />
+      </LazyMotion>
     )
   },
 )

packages/components/src/popover/popover-transition.tsx

@@ -1,5 +1,11 @@
 import { chakra, HTMLChakraProps, forwardRef } from "../system"
-import { HTMLMotionProps, motion, Variant } from "framer-motion"
+import {
+  domAnimation,
+  HTMLMotionProps,
+  LazyMotion,
+  m,
+  Variant,
+} from "framer-motion"
 import React from "react"
 import { usePopoverContext } from "./popover-context"
 
@@ -58,7 +64,7 @@ const scaleFade: MotionVariants = {
   },
 }
 
-const MotionSection = chakra(motion.section)
+const MotionSection = chakra(m.section)
 
 export interface PopoverTransitionProps
   extends HTMLMotionChakraProps<"section"> {}
@@ -70,13 +76,15 @@ export const PopoverTransition = forwardRef(function PopoverTransition(
   const { variants = scaleFade, ...rest } = props
   const { isOpen } = usePopoverContext()
   return (
-    <MotionSection
-      ref={ref}
-      variants={mergeVariants(variants)}
-      initial={false}
-      animate={isOpen ? "enter" : "exit"}
-      {...rest}
-    />
+    <LazyMotion features={domAnimation}>
+      <MotionSection
+        ref={ref}
+        variants={mergeVariants(variants)}
+        initial={false}
+        animate={isOpen ? "enter" : "exit"}
+        {...rest}
+      />
+    </LazyMotion>
   )
 })
 

packages/components/src/popper/popper.new.stories.tsx

@@ -1,4 +1,4 @@
-import { motion } from "framer-motion"
+import { LazyMotion, domAnimation, m } from "framer-motion"
 import * as React from "react"
 import { usePopper } from "."
 
@@ -116,29 +116,31 @@ export const WithAnimation = () => {
         Trigger
       </button>
       <div {...getPopperProps()}>
-        <motion.div
-          style={{
-            transformOrigin,
-            background: "red",
-            padding: 8,
-          }}
-          transition={{ duration: 0.15 }}
-          initial={false}
-          animate={
-            isOpen ? { scale: 1, opacity: 1 } : { scale: 0.85, opacity: 0.01 }
-          }
-        >
-          <div
-            {...getArrowProps({
-              shadowColor: "rgba(0,0,0,0.3)",
-              size: "8px",
-              bg: "red",
-            })}
+        <LazyMotion features={domAnimation}>
+          <m.div
+            style={{
+              transformOrigin,
+              background: "red",
+              padding: 8,
+            }}
+            transition={{ duration: 0.15 }}
+            initial={false}
+            animate={
+              isOpen ? { scale: 1, opacity: 1 } : { scale: 0.85, opacity: 0.01 }
+            }
           >
-            <div {...getArrowInnerProps()} />
-          </div>
-          Popper
-        </motion.div>
+            <div
+              {...getArrowProps({
+                shadowColor: "rgba(0,0,0,0.3)",
+                size: "8px",
+                bg: "red",
+              })}
+            >
+              <div {...getArrowInnerProps()} />
+            </div>
+            Popper
+          </m.div>
+        </LazyMotion>
       </div>
     </div>
   )

packages/components/src/popper/popper.stories.tsx

@@ -1,5 +1,5 @@
 import { useDisclosure } from "@chakra-ui/hooks"
-import { motion, Variants } from "framer-motion"
+import { m, domAnimation, LazyMotion, Variants } from "framer-motion"
 import { usePopper } from "."
 
 export default {
@@ -61,26 +61,28 @@ export const WithTransition = () => {
         Toggle
       </button>
       <div ref={popperRef} style={{ ["--popper-arrow-bg" as string]: "red" }}>
-        <motion.div
-          transition={{
-            duration: 0.15,
-            easings: "easeInOut",
-          }}
-          variants={slide}
-          initial={false}
-          animate={isOpen ? "enter" : "exit"}
-          style={{
-            background: bg,
-            width: 200,
-            transformOrigin: "var(--popper-transform-origin)",
-            borderRadius: 4,
-          }}
-        >
-          Testing
-          <div data-popper-arrow="">
-            <div data-popper-arrow-inner="" />
-          </div>
-        </motion.div>
+        <LazyMotion features={domAnimation}>
+          <m.div
+            transition={{
+              duration: 0.15,
+              easings: "easeInOut",
+            }}
+            variants={slide}
+            initial={false}
+            animate={isOpen ? "enter" : "exit"}
+            style={{
+              background: bg,
+              width: 200,
+              transformOrigin: "var(--popper-transform-origin)",
+              borderRadius: 4,
+            }}
+          >
+            Testing
+            <div data-popper-arrow="">
+              <div data-popper-arrow-inner="" />
+            </div>
+          </m.div>
+        </LazyMotion>
       </div>
     </>
   )

packages/components/src/toast/toast.component.tsx

@@ -2,7 +2,7 @@ import { useTimeout } from "@chakra-ui/hooks/use-timeout"
 import { useUpdateEffect } from "@chakra-ui/hooks/use-update-effect"
 import { chakra } from "../system"
 import { runIfFn } from "@chakra-ui/utils/run-if-fn"
-import { motion, useIsPresent, Variants } from "framer-motion"
+import { m, domMax, LazyMotion, useIsPresent, Variants } from "framer-motion"
 import { memo, useEffect, useMemo, useState } from "react"
 import { ToastProviderProps } from "./toast.provider"
 import type { ToastOptions } from "./toast.types"
@@ -102,27 +102,29 @@ export const ToastComponent = memo((props: ToastComponentProps) => {
   const toastStyle = useMemo(() => getToastStyle(position), [position])
 
   return (
-    <motion.div
-      layout
-      className="chakra-toast"
-      variants={motionVariants}
-      initial="initial"
-      animate="animate"
-      exit="exit"
-      onHoverStart={onMouseEnter}
-      onHoverEnd={onMouseLeave}
-      custom={{ position }}
-      style={toastStyle}
-    >
-      <chakra.div
-        role="status"
-        aria-atomic="true"
-        className="chakra-toast__inner"
-        __css={containerStyles}
+    <LazyMotion features={domMax}>
+      <m.div
+        layout
+        className="chakra-toast"
+        variants={motionVariants}
+        initial="initial"
+        animate="animate"
+        exit="exit"
+        onHoverStart={onMouseEnter}
+        onHoverEnd={onMouseLeave}
+        custom={{ position }}
+        style={toastStyle}
       >
-        {runIfFn(message, { id, onClose: close })}
-      </chakra.div>
-    </motion.div>
+        <chakra.div
+          role="status"
+          aria-atomic="true"
+          className="chakra-toast__inner"
+          __css={containerStyles}
+        >
+          {runIfFn(message, { id, onClose: close })}
+        </chakra.div>
+      </m.div>
+    </LazyMotion>
   )
 })
 

packages/components/src/tooltip/tooltip-content.tsx

@@ -1,5 +1,5 @@
 import { getCSSVar } from "@chakra-ui/styled-system"
-import { HTMLMotionProps, motion } from "framer-motion"
+import { HTMLMotionProps, m, LazyMotion, domAnimation } from "framer-motion"
 import { popperCSSVars } from "../popper"
 import { HTMLChakraProps, chakra, forwardRef, useTheme } from "../system"
 import { useTooltipContext, useTooltipStyles } from "./tooltip-context"
@@ -42,15 +42,17 @@ export const TooltipContent = forwardRef<TooltipContentProps, "div">(
         __css={styles}
         {...api.getContentProps(restProps, ref)}
       >
-        <motion.div
-          variants={scale}
-          initial="exit"
-          animate="enter"
-          exit="exit"
-          {...motionProps}
-        >
-          {props.children}
-        </motion.div>
+        <LazyMotion features={domAnimation}>
+          <m.div
+            variants={scale}
+            initial="exit"
+            animate="enter"
+            exit="exit"
+            {...motionProps}
+          >
+            {props.children}
+          </m.div>
+        </LazyMotion>
       </chakra.div>
     )
   },