From ea1ca58c81067b772daa1a8e7cb43dca490a2d95 Mon Sep 17 00:00:00 2001 From: Dominik K Date: Wed, 6 Mar 2024 19:40:16 +0100 Subject: [PATCH 1/5] fix: remove unused framer motion features --- .../accordion/src/accordion-item.tsx | 50 ++++++++++-------- .../components/modal/src/modal-content.tsx | 40 +++++++------- .../components/navbar/src/navbar-menu.tsx | 40 +++++++------- packages/components/navbar/src/navbar.tsx | 20 +++---- .../popover/src/free-solo-popover.tsx | 46 ++++++++-------- .../popover/src/popover-content.tsx | 44 +++++++++------- packages/components/ripple/src/ripple.tsx | 52 ++++++++++--------- packages/components/tabs/src/tab.tsx | 28 +++++----- packages/components/tooltip/src/tooltip.tsx | 28 +++++----- 9 files changed, 187 insertions(+), 161 deletions(-) diff --git a/packages/components/accordion/src/accordion-item.tsx b/packages/components/accordion/src/accordion-item.tsx index 081678c42f..48990afab1 100644 --- a/packages/components/accordion/src/accordion-item.tsx +++ b/packages/components/accordion/src/accordion-item.tsx @@ -1,7 +1,7 @@ import {forwardRef} from "@nextui-org/system"; import {useMemo, ReactNode} from "react"; import {ChevronIcon} from "@nextui-org/shared-icons"; -import {AnimatePresence, motion, useWillChange} from "framer-motion"; +import {AnimatePresence, LazyMotion, domAnimation, m, useWillChange} from "framer-motion"; import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions"; import {UseAccordionItemProps, useAccordionItem} from "./use-accordion-item"; @@ -53,31 +53,35 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => { } return keepContentMounted ? ( - -
{children}
-
+ + +
{children}
+
+
) : ( {isOpen && ( - -
{children}
-
+ + +
{children}
+
+
)}
); diff --git a/packages/components/modal/src/modal-content.tsx b/packages/components/modal/src/modal-content.tsx index 661951907b..d0d12fab8c 100644 --- a/packages/components/modal/src/modal-content.tsx +++ b/packages/components/modal/src/modal-content.tsx @@ -7,7 +7,7 @@ import {DismissButton} from "@react-aria/overlays"; import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions"; import {CloseIcon} from "@nextui-org/shared-icons"; import {RemoveScroll} from "react-remove-scroll"; -import {motion} from "framer-motion"; +import {domAnimation, LazyMotion, m} from "framer-motion"; import {useDialog} from "@react-aria/dialog"; import {mergeProps} from "@react-aria/utils"; import {HTMLNextUIProps} from "@nextui-org/system"; @@ -78,13 +78,15 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _) } return ( - )} - /> + + )} + /> + ); }, [backdrop, disableAnimation, getBackdropProps]); @@ -95,16 +97,18 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _) {disableAnimation ? (
{content}
) : ( - - {content} - + + + {content} + + )} diff --git a/packages/components/navbar/src/navbar-menu.tsx b/packages/components/navbar/src/navbar-menu.tsx index 4e862f39e9..9587be3060 100644 --- 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, HTMLMotionProps, motion} from "framer-motion"; +import {AnimatePresence, domAnimation, HTMLMotionProps, LazyMotion, m} from "framer-motion"; import {mergeProps} from "@react-aria/utils"; import {ReactElement, useCallback} from "react"; import {RemoveScroll} from "react-remove-scroll"; @@ -61,24 +61,26 @@ const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => { {isMenuOpen ? ( - - {children} - + + + {children} + + ) : null} diff --git a/packages/components/navbar/src/navbar.tsx b/packages/components/navbar/src/navbar.tsx index 7249e4f841..6fe07b9a1c 100644 --- 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 {motion} from "framer-motion"; +import {LazyMotion, domAnimation, m} from "framer-motion"; import {mergeProps} from "@react-aria/utils"; import {hideOnScrollVariants} from "./navbar-transitions"; @@ -31,14 +31,16 @@ const Navbar = forwardRef<"div", NavbarProps>((props, ref) => { return ( {context.shouldHideOnScroll ? ( - - {content} - + + + {content} + + ) : ( {content} )} diff --git a/packages/components/popover/src/free-solo-popover.tsx b/packages/components/popover/src/free-solo-popover.tsx index 87008bdbad..7a902264f4 100644 --- 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 {HTMLMotionProps, motion} from "framer-motion"; +import {domAnimation, 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-transitions"; @@ -39,19 +39,21 @@ const FreeSoloPopoverWrapper = ({ return disableAnimation ? (
{children}
) : ( - - {children} - + + + {children} + + ); }; @@ -87,13 +89,15 @@ const FreeSoloPopover = forwardRef<"div", FreeSoloPopoverProps>((props, ref) => } return ( - )} - /> + + )} + /> + ); }, [backdrop, disableAnimation, getBackdropProps]); diff --git a/packages/components/popover/src/popover-content.tsx b/packages/components/popover/src/popover-content.tsx index ff48a733f4..1f607448fd 100644 --- 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-transitions"; -import {motion} from "framer-motion"; +import {m, domAnimation, LazyMotion} from "framer-motion"; import {useDialog} from "@react-aria/dialog"; import {mergeProps} from "@react-aria/utils"; import {HTMLNextUIProps} from "@nextui-org/system"; @@ -69,13 +69,15 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => { } return ( - )} - /> + + )} + /> + ); }, [backdrop, disableAnimation, getBackdropProps]); @@ -86,18 +88,20 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => { {disableAnimation ? ( content ) : ( - - {content} - + + + {content} + + )} diff --git a/packages/components/ripple/src/ripple.tsx b/packages/components/ripple/src/ripple.tsx index e931fe6283..10f7e0fb1e 100644 --- a/packages/components/ripple/src/ripple.tsx +++ b/packages/components/ripple/src/ripple.tsx @@ -1,5 +1,5 @@ import {FC} from "react"; -import {AnimatePresence, HTMLMotionProps, motion} from "framer-motion"; +import {AnimatePresence, HTMLMotionProps, m, LazyMotion, domAnimation} from "framer-motion"; import {HTMLNextUIProps} from "@nextui-org/system"; import {RippleType} from "./use-ripple"; @@ -26,30 +26,32 @@ const Ripple: FC = (props) => { return ( - { - onClear(ripple.key); - }} - {...motionProps} - /> + + { + onClear(ripple.key); + }} + {...motionProps} + /> + ); })} diff --git a/packages/components/tabs/src/tab.tsx b/packages/components/tabs/src/tab.tsx index 31beb99c36..c7e5fe5b41 100644 --- a/packages/components/tabs/src/tab.tsx +++ b/packages/components/tabs/src/tab.tsx @@ -9,7 +9,7 @@ import {useFocusRing} from "@react-aria/focus"; import {Node} from "@react-types/shared"; import {useTab} from "@react-aria/tabs"; import {useHover} from "@react-aria/interactions"; -import {motion} from "framer-motion"; +import {m, domAnimation, LazyMotion} from "framer-motion"; import {useIsMounted} from "@nextui-org/use-is-mounted"; import {ValuesType} from "./use-tabs"; @@ -118,18 +118,20 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => { onClick={handleClick} > {isSelected && !disableAnimation && !disableCursorAnimation && isMounted ? ( - + + + ) : null}
((props, ref) => { const animatedContent = (
- - {content} - + + + {content} + +
); From 75bbaf8a8ad5d047c6b6dbdcc7d916ff1d5b882d Mon Sep 17 00:00:00 2001 From: Dominik K Date: Thu, 7 Mar 2024 16:27:17 +0100 Subject: [PATCH 2/5] fix: add changeset --- .changeset/warm-zoos-fry.md | 77 +++++++++++++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 .changeset/warm-zoos-fry.md diff --git a/.changeset/warm-zoos-fry.md b/.changeset/warm-zoos-fry.md new file mode 100644 index 0000000000..d708b884b5 --- /dev/null +++ b/.changeset/warm-zoos-fry.md @@ -0,0 +1,77 @@ +--- +"@nextui-org/accordion": major +"@nextui-org/autocomplete": major +"@nextui-org/avatar": major +"@nextui-org/badge": major +"@nextui-org/breadcrumbs": major +"@nextui-org/button": major +"@nextui-org/card": major +"@nextui-org/checkbox": major +"@nextui-org/chip": major +"@nextui-org/code": major +"@nextui-org/divider": major +"@nextui-org/dropdown": major +"@nextui-org/image": major +"@nextui-org/input": major +"@nextui-org/kbd": major +"@nextui-org/link": major +"@nextui-org/listbox": major +"@nextui-org/menu": major +"@nextui-org/modal": major +"@nextui-org/navbar": major +"@nextui-org/pagination": major +"@nextui-org/popover": major +"@nextui-org/progress": major +"@nextui-org/radio": major +"@nextui-org/ripple": major +"@nextui-org/scroll-shadow": major +"@nextui-org/select": major +"@nextui-org/skeleton": major +"@nextui-org/slider": major +"@nextui-org/snippet": major +"@nextui-org/spacer": major +"@nextui-org/spinner": major +"@nextui-org/switch": major +"@nextui-org/table": major +"@nextui-org/tabs": major +"@nextui-org/tooltip": major +"@nextui-org/user": major +"@nextui-org/react": major +"@nextui-org/system": major +"@nextui-org/system-rsc": major +"@nextui-org/theme": major +"@nextui-org/use-aria-accordion": major +"@nextui-org/use-aria-accordion-item": major +"@nextui-org/use-aria-button": major +"@nextui-org/use-aria-link": major +"@nextui-org/use-aria-modal-overlay": major +"@nextui-org/use-aria-multiselect": major +"@nextui-org/use-aria-press": major +"@nextui-org/use-aria-toggle-button": major +"@nextui-org/use-callback-ref": major +"@nextui-org/use-clipboard": major +"@nextui-org/use-data-scroll-overflow": major +"@nextui-org/use-disclosure": major +"@nextui-org/use-image": major +"@nextui-org/use-infinite-scroll": major +"@nextui-org/use-is-mobile": major +"@nextui-org/use-is-mounted": major +"@nextui-org/use-pagination": major +"@nextui-org/use-real-shape": major +"@nextui-org/use-ref-state": major +"@nextui-org/use-resize": major +"@nextui-org/use-safe-layout-effect": major +"@nextui-org/use-scroll-position": major +"@nextui-org/use-ssr": major +"@nextui-org/use-update-effect": major +"@nextui-org/aria-utils": major +"@nextui-org/framer-transitions": major +"@nextui-org/react-rsc-utils": major +"@nextui-org/react-utils": major +"@nextui-org/shared-icons": major +"@nextui-org/shared-utils": major +"@nextui-org/stories-utils": major +"@nextui-org/test-utils": major +--- + +Changes the motion important to the more lightweight m component in framer motion to only load the required features. From cb8c42c03fa958f0b5aa738b58b180bd3d7c6012 Mon Sep 17 00:00:00 2001 From: Dominik K Date: Thu, 7 Mar 2024 16:34:44 +0100 Subject: [PATCH 3/5] fix: non working tabs animation --- packages/components/tabs/src/tab.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/tabs/src/tab.tsx b/packages/components/tabs/src/tab.tsx index c7e5fe5b41..3f3da0974b 100644 --- a/packages/components/tabs/src/tab.tsx +++ b/packages/components/tabs/src/tab.tsx @@ -9,7 +9,7 @@ import {useFocusRing} from "@react-aria/focus"; import {Node} from "@react-types/shared"; import {useTab} from "@react-aria/tabs"; import {useHover} from "@react-aria/interactions"; -import {m, domAnimation, LazyMotion} from "framer-motion"; +import {m, domMax, LazyMotion} from "framer-motion"; import {useIsMounted} from "@nextui-org/use-is-mounted"; import {ValuesType} from "./use-tabs"; @@ -118,7 +118,7 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => { onClick={handleClick} > {isSelected && !disableAnimation && !disableCursorAnimation && isMounted ? ( - + Date: Thu, 7 Mar 2024 18:19:20 +0100 Subject: [PATCH 4/5] fix: remove unchanged changeset --- .changeset/warm-zoos-fry.md | 67 +------------------------------------ 1 file changed, 1 insertion(+), 66 deletions(-) diff --git a/.changeset/warm-zoos-fry.md b/.changeset/warm-zoos-fry.md index d708b884b5..439c638cf3 100644 --- a/.changeset/warm-zoos-fry.md +++ b/.changeset/warm-zoos-fry.md @@ -1,77 +1,12 @@ --- "@nextui-org/accordion": major -"@nextui-org/autocomplete": major -"@nextui-org/avatar": major -"@nextui-org/badge": major -"@nextui-org/breadcrumbs": major -"@nextui-org/button": major -"@nextui-org/card": major -"@nextui-org/checkbox": major -"@nextui-org/chip": major -"@nextui-org/code": major -"@nextui-org/divider": major -"@nextui-org/dropdown": major -"@nextui-org/image": major -"@nextui-org/input": major -"@nextui-org/kbd": major -"@nextui-org/link": major -"@nextui-org/listbox": major -"@nextui-org/menu": major +"@nextui-org/use-aria-accordion-item": major "@nextui-org/modal": major "@nextui-org/navbar": major -"@nextui-org/pagination": major "@nextui-org/popover": major -"@nextui-org/progress": major -"@nextui-org/radio": major "@nextui-org/ripple": major -"@nextui-org/scroll-shadow": major -"@nextui-org/select": major -"@nextui-org/skeleton": major -"@nextui-org/slider": major -"@nextui-org/snippet": major -"@nextui-org/spacer": major -"@nextui-org/spinner": major -"@nextui-org/switch": major -"@nextui-org/table": major "@nextui-org/tabs": major "@nextui-org/tooltip": major -"@nextui-org/user": major -"@nextui-org/react": major -"@nextui-org/system": major -"@nextui-org/system-rsc": major -"@nextui-org/theme": major -"@nextui-org/use-aria-accordion": major -"@nextui-org/use-aria-accordion-item": major -"@nextui-org/use-aria-button": major -"@nextui-org/use-aria-link": major -"@nextui-org/use-aria-modal-overlay": major -"@nextui-org/use-aria-multiselect": major -"@nextui-org/use-aria-press": major -"@nextui-org/use-aria-toggle-button": major -"@nextui-org/use-callback-ref": major -"@nextui-org/use-clipboard": major -"@nextui-org/use-data-scroll-overflow": major -"@nextui-org/use-disclosure": major -"@nextui-org/use-image": major -"@nextui-org/use-infinite-scroll": major -"@nextui-org/use-is-mobile": major -"@nextui-org/use-is-mounted": major -"@nextui-org/use-pagination": major -"@nextui-org/use-real-shape": major -"@nextui-org/use-ref-state": major -"@nextui-org/use-resize": major -"@nextui-org/use-safe-layout-effect": major -"@nextui-org/use-scroll-position": major -"@nextui-org/use-ssr": major -"@nextui-org/use-update-effect": major -"@nextui-org/aria-utils": major -"@nextui-org/framer-transitions": major -"@nextui-org/react-rsc-utils": major -"@nextui-org/react-utils": major -"@nextui-org/shared-icons": major -"@nextui-org/shared-utils": major -"@nextui-org/stories-utils": major -"@nextui-org/test-utils": major --- Changes the motion important to the more lightweight m component in framer motion to only load the required features. From a7a03de684e512be257204f89d1926d5bf292095 Mon Sep 17 00:00:00 2001 From: Dominik K Date: Fri, 8 Mar 2024 07:39:37 +0100 Subject: [PATCH 5/5] fix: move to patch --- .changeset/warm-zoos-fry.md | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/.changeset/warm-zoos-fry.md b/.changeset/warm-zoos-fry.md index 439c638cf3..63792b315f 100644 --- a/.changeset/warm-zoos-fry.md +++ b/.changeset/warm-zoos-fry.md @@ -1,12 +1,11 @@ --- -"@nextui-org/accordion": major -"@nextui-org/use-aria-accordion-item": major -"@nextui-org/modal": major -"@nextui-org/navbar": major -"@nextui-org/popover": major -"@nextui-org/ripple": major -"@nextui-org/tabs": major -"@nextui-org/tooltip": major +"@nextui-org/accordion": patch +"@nextui-org/modal": patch +"@nextui-org/navbar": patch +"@nextui-org/popover": patch +"@nextui-org/ripple": patch +"@nextui-org/tabs": patch +"@nextui-org/tooltip": patch --- Changes the motion important to the more lightweight m component in framer motion to only load the required features.