archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(calendar): function components cannot be given refs (#4614)

Browse Source
This commit is contained in:
աӄա 2025-01-21 18:39:28 +08:00 committed by GitHub
parent 66efa0a08e
commit cddba8281c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/nine-snails-sniff.md Normal file
View File

@ -0,0 +1,5 @@
---
"@heroui/calendar": patch
---
function components cannot be given refs in calendar (#4606)

25
packages/components/calendar/src/calendar-base.tsx
View File

@ -3,7 +3,7 @@ import type {As, HTMLHeroUIProps} from "@heroui/system";
import type {ButtonProps} from "@heroui/button";
import type {HTMLAttributes, ReactNode, RefObject} from "react";
import {Fragment, useState} from "react";
import {forwardRef, Fragment, useState} from "react";
import {VisuallyHidden} from "@react-aria/visually-hidden";
import {Button} from "@heroui/button";
import {chain, mergeProps} from "@react-aria/utils";
@ -34,6 +34,21 @@ export interface CalendarBaseProps extends HTMLHeroUIProps<"div"> {
errorMessage?: ReactNode;
}
/**
* Avoid this framer-motion warning:
* Function components cannot be given refs.
* Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
*
* @see https://www.framer.com/motion/animate-presence/###mode
*/
const PopLayoutWrapper = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
(props, ref) => {
return <div ref={ref} {...props} />;
},
);
PopLayoutWrapper.displayName = "HeroUI - PopLayoutWrapper";
export function CalendarBase(props: CalendarBaseProps) {
const {
Component = "div",
@ -152,9 +167,11 @@ export function CalendarBase(props: CalendarBaseProps) {
data-slot="content"
>
<AnimatePresence custom={direction} initial={false} mode="popLayout">
<MotionConfig transition={transition}>
<LazyMotion features={domAnimation}>{calendarContent}</LazyMotion>
</MotionConfig>
<PopLayoutWrapper>
<MotionConfig transition={transition}>
<LazyMotion features={domAnimation}>{calendarContent}</LazyMotion>
</MotionConfig>
</PopLayoutWrapper>
</AnimatePresence>
</ResizablePanel>
)}