From af1aa63deed35121eb02dc40b7f6a3de78b68cb9 Mon Sep 17 00:00:00 2001
From: s-sasaki-0529 <shingo.sasaki.0529@gmail.com>
Date: Fri, 12 Jul 2024 20:52:42 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20Dialog=20=E9=96=8B=E9=96=89=E6=99=82?=
 =?UTF-8?q?=E3=81=AB=E3=82=B3=E3=83=B3=E3=82=BD=E3=83=BC=E3=83=AB=E3=82=A8?=
 =?UTF-8?q?=E3=83=A9=E3=83=BC=E3=81=8C=E7=99=BA=E7=94=9F=E3=81=99=E3=82=8B?=
 =?UTF-8?q?=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Dialog/DialogOverlap.tsx   | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Dialog/DialogOverlap.tsx b/packages/smarthr-ui/src/components/Dialog/DialogOverlap.tsx
index 0ce50c4480..48badba2a3 100644
--- a/packages/smarthr-ui/src/components/Dialog/DialogOverlap.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/DialogOverlap.tsx
@@ -1,4 +1,12 @@
-import React, { FC, PropsWithChildren, ReactNode, useEffect, useMemo, useState } from 'react'
+import React, {
+  FC,
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import { CSSTransition } from 'react-transition-group'
 import { tv } from 'tailwind-variants'
 
@@ -28,6 +36,7 @@ const dialogOverlap = tv({
 export const DialogOverlap: FC<Props> = ({ isOpen, children }) => {
   const styles = useMemo(() => dialogOverlap(), [])
   const [childrenBuffer, setChildrenBuffer] = useState<ReactNode>(null)
+  const nodeRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     if (isOpen) {
@@ -36,7 +45,13 @@ export const DialogOverlap: FC<Props> = ({ isOpen, children }) => {
   }, [isOpen, children])
 
   return (
-    <CSSTransition classNames="shr-dialog-transition" in={isOpen} timeout={300} unmountOnExit>
+    <CSSTransition
+      classNames="shr-dialog-transition"
+      in={isOpen}
+      timeout={300}
+      unmountOnExit
+      nodeRef={nodeRef}
+    >
       <div className={styles}>{isOpen ? children : childrenBuffer}</div>
     </CSSTransition>
   )

From fb9248f47c79320b19f42e5a6a9a64127bf9b704 Mon Sep 17 00:00:00 2001
From: s-sasaki-0529 <shingo.sasaki.0529@gmail.com>
Date: Fri, 12 Jul 2024 21:03:50 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20nodeRef=20=E3=82=92=20div=20?=
 =?UTF-8?q?=E3=81=AB=E3=82=8F=E3=81=9F=E3=81=97=E3=81=A6=E3=81=84=E3=81=AA?=
 =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=9F=E3=81=AE=E3=81=A7=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/AccordionPanel/AccordionPanelContent.tsx   | 3 +--
 packages/smarthr-ui/src/components/Dialog/DialogOverlap.tsx   | 4 +++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelContent.tsx b/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelContent.tsx
index 184bd1c8ca..ce7b8c6d79 100644
--- a/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelContent.tsx
+++ b/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelContent.tsx
@@ -31,10 +31,9 @@ export const AccordionPanelContent: FC<Props & ElementProps> = ({ className, ...
   const isInclude = getIsInclude(expandedItems, name)
   const wrapperRef = useRef<HTMLDivElement>(null)
   const styles = useMemo(() => accordionPanelContent({ className }), [className])
-  const nodeRef = useRef<HTMLDivElement>(null)
 
   return (
-    <Transition in={isInclude} timeout={150} nodeRef={nodeRef}>
+    <Transition in={isInclude} timeout={150} nodeRef={wrapperRef}>
       {(status) => (
         <div
           {...props}
diff --git a/packages/smarthr-ui/src/components/Dialog/DialogOverlap.tsx b/packages/smarthr-ui/src/components/Dialog/DialogOverlap.tsx
index 48badba2a3..3fe7c3912c 100644
--- a/packages/smarthr-ui/src/components/Dialog/DialogOverlap.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/DialogOverlap.tsx
@@ -52,7 +52,9 @@ export const DialogOverlap: FC<Props> = ({ isOpen, children }) => {
       unmountOnExit
       nodeRef={nodeRef}
     >
-      <div className={styles}>{isOpen ? children : childrenBuffer}</div>
+      <div ref={nodeRef} className={styles}>
+        {isOpen ? children : childrenBuffer}
+      </div>
     </CSSTransition>
   )
 }