From 30535627675a845176a0f02fb6d96169cc295a92 Mon Sep 17 00:00:00 2001
From: deatiger <32066680+deatiger@users.noreply.github.com>
Date: Thu, 25 Apr 2024 09:53:31 +0900
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Accordion=20=E5=86=85?=
 =?UTF-8?q?=E9=83=A8=E3=81=AE=E3=82=B3=E3=83=B3=E3=83=86=E3=83=B3=E3=83=84?=
 =?UTF-8?q?=E3=81=AE=E9=AB=98=E3=81=95=E3=81=8C=E5=8B=95=E7=9A=84=E3=81=AB?=
 =?UTF-8?q?=E5=A4=89=E3=82=8F=E3=82=8B=E5=A0=B4=E5=90=88=E3=81=AB=E5=AF=BE?=
 =?UTF-8?q?=E5=BF=9C=20(#1605)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/funny-bears-ring.md                |  5 +++
 .../Accordion/Accordion.stories.tsx           | 38 +++++++++++++++++++
 src/components/Accordion/Accordion.tsx        | 28 +++++++++-----
 .../__snapshots__/Accordion.test.tsx.snap     | 10 +++--
 src/components/Accordion/styled.ts            |  8 ++--
 .../__snapshots__/DualListBox.test.tsx.snap   |  5 ++-
 6 files changed, 74 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/funny-bears-ring.md

diff --git a/.changeset/funny-bears-ring.md b/.changeset/funny-bears-ring.md
new file mode 100644
index 000000000..1bccf86ec
--- /dev/null
+++ b/.changeset/funny-bears-ring.md
@@ -0,0 +1,5 @@
+---
+"ingred-ui": minor
+---
+
+:lipstick: Accordion コンポーネント内のコンテンツの高さが可変の場合に対応
diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
index bf258fadd..e6e8a1b4d 100644
--- a/src/components/Accordion/Accordion.stories.tsx
+++ b/src/components/Accordion/Accordion.stories.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
 import { StoryObj } from "@storybook/react";
 import Accordion, { AccordionProps } from "./Accordion";
+import { useState } from "react";
+import { ActionButton, Flex } from "..";
 
 export default {
   title: "Components/navigation/Accordion",
@@ -115,3 +117,39 @@ export const Controlled: StoryObj<AccordionProps> = {
     );
   },
 };
+
+export const DynamicHeight: StoryObj<AccordionProps> = {
+  render: (args) => {
+    const [rows, setRows] = useState<number>(1);
+    const handleAddRow = () => setRows((prevState) => prevState + 1);
+    const handleRemoveRow = () =>
+      setRows((prevState) => (prevState > 1 ? prevState - 1 : 1));
+    return (
+      <Flex display="flex" flexDirection="column" gap={2}>
+        <Flex display="flex" flexDirection="row" gap={2}>
+          <ActionButton color="primary" icon="add_line" onClick={handleAddRow}>
+            Add
+          </ActionButton>
+          <ActionButton
+            color="warning"
+            icon="delete_bin"
+            onClick={handleRemoveRow}
+          >
+            Remove
+          </ActionButton>
+        </Flex>
+        <Accordion
+          title={args.title}
+          disabled={args.disabled}
+          expanded={args.expanded}
+        >
+          {[...Array(rows)].map((_, index) => (
+            <div key={index} style={{ padding: "4px 8px" }}>
+              {args.children}
+            </div>
+          ))}
+        </Accordion>
+      </Flex>
+    );
+  },
+};
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index dbe1bdb24..d84e959e0 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -2,7 +2,6 @@ import React, {
   ReactNode,
   forwardRef,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from "react";
@@ -24,19 +23,20 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
 ) {
   const theme = useTheme();
   const [expandedState, setExpandedState] = useState(expanded);
+  const [height, setHeight] = useState<`${number}px` | "auto">("0px");
+  const [overflow, setOverflow] = useState<"hidden" | "visible">("hidden");
   const accordionContentContainerRef = useRef<HTMLDivElement>(null);
 
-  const height = useMemo(() => {
-    if (expandedState && accordionContentContainerRef.current) {
-      return accordionContentContainerRef.current.scrollHeight;
-    }
-    return 0;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [expandedState, accordionContentContainerRef.current]);
-
   const handleChange = (event: React.SyntheticEvent, expanded: boolean) => {
     setExpandedState(expanded);
     onChange && onChange(event, expanded);
+    if (expanded) {
+      setHeight(`${accordionContentContainerRef.current?.scrollHeight ?? 0}px`);
+    } else {
+      setHeight(`${accordionContentContainerRef.current?.scrollHeight ?? 0}px`);
+      setOverflow("hidden");
+      setTimeout(() => setHeight("0px"), 100);
+    }
   };
 
   const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -49,6 +49,13 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
     }
   };
 
+  const handleTransitionEnd = () => {
+    if (expandedState) {
+      setHeight("auto");
+      setOverflow("visible");
+    }
+  };
+
   useEffect(() => {
     setExpandedState(expanded);
   }, [expanded]);
@@ -79,8 +86,9 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
       </Styled.AccordionTitle>
       <Styled.AccordionContent
         ref={accordionContentContainerRef}
-        expanded={expandedState}
         height={height}
+        overflow={overflow}
+        onTransitionEnd={handleTransitionEnd}
       >
         {children}
       </Styled.AccordionContent>
diff --git a/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap b/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap
index aa90e2c7e..cf204ef21 100644
--- a/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap
+++ b/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap
@@ -47,8 +47,9 @@ exports[`Accordion component testing Accordion 1`] = `
       </div>
     </div>
     <div
-      class="sc-ftvSup hGExZo"
-      height="0"
+      class="sc-ftvSup bxDIpT"
+      height="0px"
+      overflow="hidden"
     >
       Accordion Content
     </div>
@@ -104,8 +105,9 @@ exports[`Accordion component testing Disable Accordion 1`] = `
       </div>
     </div>
     <div
-      class="sc-ftvSup hGExZo"
-      height="0"
+      class="sc-ftvSup bxDIpT"
+      height="0px"
+      overflow="hidden"
     >
       Accordion Content
     </div>
diff --git a/src/components/Accordion/styled.ts b/src/components/Accordion/styled.ts
index 491d0bd90..e23a3dc15 100644
--- a/src/components/Accordion/styled.ts
+++ b/src/components/Accordion/styled.ts
@@ -48,11 +48,11 @@ export const DropdownIndicator = styled.div`
 `;
 
 export const AccordionContent = styled.div<{
-  expanded: boolean;
-  height: number;
+  height: `${number}px` | "auto";
+  overflow: "hidden" | "visible";
 }>`
-  height: ${({ height }) => height}px;
-  overflow: hidden;
+  height: ${({ height }) => height};
+  overflow: ${({ overflow }) => overflow};
   transition: 0.3s all;
   background-color: ${({ theme }) => theme.palette.white};
 `;
diff --git a/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap b/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
index 63dd29692..d8f762988 100644
--- a/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
+++ b/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
@@ -494,8 +494,9 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
             </div>
           </div>
           <div
-            class="sc-papXJ NpijN"
-            height="0"
+            class="sc-papXJ gvktiO"
+            height="0px"
+            overflow="hidden"
           >
             <ul
               class="sc-jqUVSM bBFcLq"