heroui-inc · wingkwong · Jul 4, 2024 · Jun 29, 2024 · Jun 29, 2024 · Jun 29, 2024
diff --git a/.changeset/pink-rivers-rush.md b/.changeset/pink-rivers-rush.md
@@ -0,0 +1,20 @@
+---
+"@nextui-org/accordion": patch
+"@nextui-org/autocomplete": patch
+"@nextui-org/button": patch
+"@nextui-org/calendar": patch
+"@nextui-org/card": patch
+"@nextui-org/dropdown": patch
+"@nextui-org/modal": patch
+"@nextui-org/navbar": patch
+"@nextui-org/popover": patch
+"@nextui-org/ripple": patch
+"@nextui-org/select": patch
+"@nextui-org/snippet": patch
+"@nextui-org/tabs": patch
+"@nextui-org/tooltip": patch
+"@nextui-org/system": patch
+"@nextui-org/framer-utils": patch
+---
+
+update `framer-motion` versions
diff --git a/.changeset/tiny-kids-thank.md b/.changeset/tiny-kids-thank.md
@@ -0,0 +1,15 @@
+---
+"@nextui-org/accordion": patch
+"@nextui-org/calendar": patch
+"@nextui-org/modal": patch
+"@nextui-org/navbar": patch
+"@nextui-org/popover": patch
+"@nextui-org/ripple": patch
+"@nextui-org/tooltip": patch
+"@nextui-org/theme": patch
+"@nextui-org/use-infinite-scroll": patch
+"@nextui-org/dom-animation": patch
+"@nextui-org/shared-utils": patch
+---
+
+framer motion optimization (#3340)
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -55,7 +55,7 @@
     "color2k": "^2.0.2",
     "contentlayer": "^0.3.4",
     "date-fns": "^2.30.0",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.2.12",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
     "hast-util-to-html": "7.1.2",

diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json
@@ -42,7 +42,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -54,6 +54,7 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/divider": "workspace:*",
     "@nextui-org/use-aria-accordion": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/interactions": "3.21.3",
     "@react-aria/focus": "3.17.1",
     "@react-aria/utils": "3.24.1",
@@ -69,7 +70,7 @@
     "@nextui-org/avatar": "workspace:*",
     "@nextui-org/input": "workspace:*",
     "@nextui-org/test-utils": "workspace:*",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "^11.2.12",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

diff --git a/packages/components/accordion/src/accordion-item.tsx b/packages/components/accordion/src/accordion-item.tsx
@@ -3,13 +3,15 @@ import type {Variants} from "framer-motion";
 import {forwardRef} from "@nextui-org/system";
 import {useMemo, ReactNode} from "react";
 import {ChevronIcon} from "@nextui-org/shared-icons";
-import {AnimatePresence, LazyMotion, domAnimation, m, useWillChange} from "framer-motion";
+import {AnimatePresence, LazyMotion, m, useWillChange} from "framer-motion";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 
 import {UseAccordionItemProps, useAccordionItem} from "./use-accordion-item";
 
 export interface AccordionItemProps extends UseAccordionItemProps {}
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
   const {
     Component,

diff --git a/packages/components/autocomplete/package.json b/packages/components/autocomplete/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -71,7 +71,7 @@
     "@nextui-org/stories-utils": "workspace:*",
     "@nextui-org/use-infinite-scroll": "workspace:*",
     "@react-stately/data": "3.11.4",
-    "framer-motion": "^11.0.28",
+    "framer-motion": "^11.2.12",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

diff --git a/packages/components/button/package.json b/packages/components/button/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },

diff --git a/packages/components/calendar/package.json b/packages/components/calendar/package.json
@@ -46,6 +46,7 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/button": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@internationalized/date": "^3.5.4",
     "@react-aria/calendar": "3.5.8",
     "@react-aria/focus": "3.17.1",
@@ -65,7 +66,7 @@
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/radio": "workspace:*",
     "@nextui-org/test-utils": "workspace:*",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^11.2.12",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

diff --git a/packages/components/calendar/src/calendar-base.tsx b/packages/components/calendar/src/calendar-base.tsx
@@ -3,13 +3,12 @@ import type {As, HTMLNextUIProps} from "@nextui-org/system";
 import type {ButtonProps} from "@nextui-org/button";
 import type {HTMLAttributes, ReactNode, RefObject} from "react";
 
-import {Fragment} from "react";
-import {useState} from "react";
+import {Fragment, useState} from "react";
 import {useLocale} from "@react-aria/i18n";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {Button} from "@nextui-org/button";
 import {chain, mergeProps} from "@react-aria/utils";
-import {AnimatePresence, LazyMotion, domAnimation, MotionConfig} from "framer-motion";
+import {AnimatePresence, LazyMotion, MotionConfig} from "framer-motion";
 import {ResizablePanel} from "@nextui-org/framer-utils";
 
 import {ChevronLeftIcon} from "./chevron-left";
@@ -20,6 +19,8 @@ import {CalendarHeader} from "./calendar-header";
 import {CalendarPicker} from "./calendar-picker";
 import {useCalendarContext} from "./calendar-context";
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 export interface CalendarBaseProps extends HTMLNextUIProps<"div"> {
   Component?: As;
   showHelper?: boolean;

diff --git a/packages/components/card/package.json b/packages/components/card/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },

diff --git a/packages/components/dropdown/package.json b/packages/components/dropdown/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -61,7 +61,7 @@
     "@nextui-org/image": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/test-utils": "workspace:*",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "^11.2.12",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

diff --git a/packages/components/modal/package.json b/packages/components/modal/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -48,6 +48,7 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/use-aria-modal-overlay": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/dialog": "3.5.14",
     "@react-aria/focus": "3.17.1",
     "@react-aria/interactions": "3.21.3",
@@ -64,7 +65,7 @@
     "@nextui-org/button": "workspace:*",
     "@nextui-org/link": "workspace:*",
     "react-lorem-component": "0.13.0",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "^11.2.12",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

diff --git a/packages/components/modal/src/modal-content.tsx b/packages/components/modal/src/modal-content.tsx
@@ -6,7 +6,7 @@ import {forwardRef} from "@nextui-org/system";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 import {CloseIcon} from "@nextui-org/shared-icons";
-import {domAnimation, LazyMotion, m} from "framer-motion";
+import {LazyMotion, m} from "framer-motion";
 import {useDialog} from "@react-aria/dialog";
 import {chain, mergeProps} from "@react-aria/utils";
 import {HTMLNextUIProps} from "@nextui-org/system";
@@ -21,6 +21,8 @@ export interface ModalContentProps extends AriaDialogProps, HTMLNextUIProps<"div
   children: ReactNode | ((onClose: () => void) => ReactNode);
 }
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _) => {
   const {as, children, role = "dialog", ...otherProps} = props;
 
@@ -84,6 +86,8 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
       return <div {...getBackdropProps()} />;
     }
 
+    const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
     return (
       <LazyMotion features={domAnimation}>
         <m.div

diff --git a/packages/components/navbar/package.json b/packages/components/navbar/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -46,6 +46,7 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/use-aria-toggle-button": "workspace:*",
     "@nextui-org/use-scroll-position": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/focus": "3.17.1",
     "@react-aria/interactions": "3.21.3",
     "@react-aria/overlays": "3.22.1",

diff --git a/packages/components/navbar/src/navbar-menu.tsx b/packages/components/navbar/src/navbar-menu.tsx
@@ -1,7 +1,7 @@
 import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
-import {AnimatePresence, domAnimation, HTMLMotionProps, LazyMotion, m} from "framer-motion";
+import {AnimatePresence, HTMLMotionProps, LazyMotion, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 import {ReactElement, useCallback} from "react";
 import {RemoveScroll} from "react-remove-scroll";
@@ -23,6 +23,8 @@ export interface NavbarMenuProps extends HTMLNextUIProps<"ul"> {
   motionProps?: HTMLMotionProps<"ul">;
 }
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
   const {className, children, portalContainer, motionProps, style, ...otherProps} = props;
   const domRef = useDOMRef(ref);

diff --git a/packages/components/navbar/src/navbar.tsx b/packages/components/navbar/src/navbar.tsx
@@ -1,6 +1,6 @@
 import {forwardRef} from "@nextui-org/system";
 import {pickChildren} from "@nextui-org/react-utils";
-import {LazyMotion, domAnimation, m} from "framer-motion";
+import {LazyMotion, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 
 import {hideOnScrollVariants} from "./navbar-transitions";
@@ -12,6 +12,8 @@ export interface NavbarProps extends Omit<UseNavbarProps, "hideOnScroll"> {
   children?: React.ReactNode | React.ReactNode[];
 }
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const Navbar = forwardRef<"div", NavbarProps>((props, ref) => {
   const {children, ...otherProps} = props;
 

diff --git a/packages/components/popover/package.json b/packages/components/popover/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
@@ -48,6 +48,7 @@
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/dialog": "3.5.14",
     "@react-aria/focus": "3.17.1",
     "@react-aria/interactions": "3.21.3",
@@ -63,7 +64,7 @@
     "@nextui-org/system": "workspace:*",
     "@nextui-org/input": "workspace:*",
     "@nextui-org/card": "workspace:*",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "^11.2.12",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

diff --git a/packages/components/popover/src/free-solo-popover.tsx b/packages/components/popover/src/free-solo-popover.tsx
@@ -10,7 +10,7 @@
 import * as React from "react";
 import {DismissButton, Overlay} from "@react-aria/overlays";
 import {forwardRef} from "@nextui-org/system";
-import {domAnimation, HTMLMotionProps, LazyMotion, m} from "framer-motion";
+import {HTMLMotionProps, LazyMotion, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 import {getTransformOrigins} from "@nextui-org/aria-utils";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
@@ -34,6 +34,8 @@ type FreeSoloPopoverWrapperProps = {
   motionProps?: UsePopoverProps["motionProps"];
 } & React.HTMLAttributes<HTMLDivElement>;
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const FreeSoloPopoverWrapper = forwardRef<"div", FreeSoloPopoverWrapperProps>(
   (
     {

diff --git a/packages/components/popover/src/popover-content.tsx b/packages/components/popover/src/popover-content.tsx
@@ -5,7 +5,7 @@ import {DOMAttributes, ReactNode, useMemo, useRef} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
-import {m, domAnimation, LazyMotion} from "framer-motion";
+import {m, LazyMotion} from "framer-motion";
 import {HTMLNextUIProps} from "@nextui-org/system";
 import {RemoveScroll} from "react-remove-scroll";
 import {getTransformOrigins} from "@nextui-org/aria-utils";
@@ -19,6 +19,8 @@ export interface PopoverContentProps
   children: ReactNode | ((titleProps: DOMAttributes<HTMLElement>) => ReactNode);
 }
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
   const {as, children, className, ...otherProps} = props;
 

diff --git a/packages/components/ripple/package.json b/packages/components/ripple/package.json
@@ -36,19 +36,20 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "framer-motion": ">=11.0.22",
     "@nextui-org/theme": ">=2.1.0",
     "@nextui-org/system": ">=2.0.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
-    "@nextui-org/react-utils": "workspace:*"
+    "@nextui-org/react-utils": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/system": "workspace:*",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "^11.2.12",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

diff --git a/packages/components/ripple/src/ripple.tsx b/packages/components/ripple/src/ripple.tsx
@@ -3,7 +3,7 @@ import type {FC} from "react";
 import type {HTMLMotionProps} from "framer-motion";
 import type {HTMLNextUIProps} from "@nextui-org/system";
 
-import {AnimatePresence, m, LazyMotion, domAnimation} from "framer-motion";
+import {AnimatePresence, m, LazyMotion} from "framer-motion";
 import {clamp} from "@nextui-org/shared-utils";
 
 export interface RippleProps extends HTMLNextUIProps<"span"> {
@@ -14,6 +14,8 @@ export interface RippleProps extends HTMLNextUIProps<"span"> {
   onClear: (key: React.Key) => void;
 }
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const Ripple: FC<RippleProps> = (props) => {
   const {ripples = [], motionProps, color = "currentColor", style, onClear} = props;