From ab3b51a5ecc0ce2bad8a54402646128729a6b3ae Mon Sep 17 00:00:00 2001
From: eatski <i.haga629@gmail.com>
Date: Tue, 17 Dec 2024 16:23:45 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20MultiComboBox=E3=81=AEStory=E3=81=A7?=
 =?UTF-8?q?=E5=AE=9A=E7=BE=A9=E3=81=97=E3=81=A6=E3=81=84=E3=82=8BdefaultIt?=
 =?UTF-8?q?ems=E3=82=92=E9=96=A2=E6=95=B0=E3=81=AE=E4=B8=AD=E3=81=AB?=
 =?UTF-8?q?=E7=A7=BB=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ComboBox/MultiCombobox.stories.tsx        | 101 +++++++++---------
 1 file changed, 52 insertions(+), 49 deletions(-)

diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiCombobox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiCombobox.stories.tsx
index ebd09626b2..b2d4fa81a9 100644
--- a/packages/smarthr-ui/src/components/ComboBox/MultiCombobox.stories.tsx
+++ b/packages/smarthr-ui/src/components/ComboBox/MultiCombobox.stories.tsx
@@ -17,51 +17,6 @@ export default {
   },
 }
 
-const defaultItems = [
-  {
-    label: 'option 1',
-    value: 'value-1',
-    data: {
-      name: 'test',
-      age: 23,
-    },
-  },
-  {
-    label: 'option 2',
-    value: 'value-2',
-    data: {
-      name: 'test 2',
-      age: 34,
-    },
-  },
-  {
-    label: 'option 3',
-    value: 'value-3',
-    disabled: true,
-  },
-  {
-    label: 'option 4',
-    value: 'value-4',
-  },
-  {
-    label: 'option 5',
-    value: 'value-5',
-  },
-  {
-    label: 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）',
-    value: 'value-6',
-  },
-  {
-    label: (
-      <Stack as="span" gap={0.25}>
-        <span>アイテムのラベルがReactNodeの場合</span>
-        <span>（ダミーテキストダミーテキストダミーテキストダミーテキスト）</span>
-      </Stack>
-    ),
-    value: 'value-7',
-  },
-]
-
 const manyItems = Array.from({ length: 2000 }).map((_, i) => ({
   label: `option ${i}`,
   value: `option ${i}`,
@@ -69,8 +24,54 @@ const manyItems = Array.from({ length: 2000 }).map((_, i) => ({
 
 type Item = { label: ReactNode; value: string; disabled?: boolean; data?: any }
 
-export const MultiCombobox: StoryFn = () => {
-  const [items, setItems] = useState<Item[]>(defaultItems)
+const MultiComboboxComponent = () => {
+  const defaultItems = [
+    {
+      label: 'option 1',
+      value: 'value-1',
+      data: {
+        name: 'test',
+        age: 23,
+      },
+    },
+    {
+      label: 'option 2',
+      value: 'value-2',
+      data: {
+        name: 'test 2',
+        age: 34,
+      },
+    },
+    {
+      label: 'option 3',
+      value: 'value-3',
+      disabled: true,
+    },
+    {
+      label: 'option 4',
+      value: 'value-4',
+    },
+    {
+      label: 'option 5',
+      value: 'value-5',
+    },
+    {
+      label:
+        'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）',
+      value: 'value-6',
+    },
+    {
+      label: (
+        <Stack as="span" gap={0.25}>
+          <span>アイテムのラベルがReactNodeの場合</span>
+          <span>（ダミーテキストダミーテキストダミーテキストダミーテキスト）</span>
+        </Stack>
+      ),
+      value: 'value-7',
+    },
+  ]
+  const [addedItems, setAddedItems] = useState<Item[]>([])
+  const items = [...defaultItems, ...addedItems]
   const [selectedItems, setSelectedItems] = useState<Item[]>([])
   const [seq, setSeq] = useState(0)
   const [controlledInputValue, setControlledInputValue] = useState<string>('')
@@ -96,11 +97,11 @@ export const MultiCombobox: StoryFn = () => {
         label,
         value: label,
       }
-      setItems([...items, newItem])
+      setAddedItems([...addedItems, newItem])
       setSelectedItems([...selectedItems, newItem])
       setSeq(seq + 1)
     },
-    [items, selectedItems, seq],
+    [addedItems, selectedItems, seq],
   )
 
   return (
@@ -293,3 +294,5 @@ export const MultiCombobox: StoryFn = () => {
     </Stack>
   )
 }
+
+export const MultiCombobox: StoryFn = () => <MultiComboboxComponent />