From 91e5add8447d420cf30eecabe73977472f31feb6 Mon Sep 17 00:00:00 2001
From: ichi-h <85932406+ichi-h@users.noreply.github.com>
Date: Thu, 20 Jun 2024 21:30:01 +0900
Subject: [PATCH] =?UTF-8?q?feat(search-input):=20=E9=81=B8=E6=8A=9E?=
 =?UTF-8?q?=E3=81=97=E3=81=9F=E8=A6=81=E7=B4=A0=E3=81=AE=E3=82=A2=E3=82=A4?=
 =?UTF-8?q?=E3=83=86=E3=83=A0=E3=81=AE=E8=A6=AA=E9=9A=8E=E5=B1=A4=E3=81=8C?=
 =?UTF-8?q?=E3=82=8F=E3=81=8B=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=99?=
 =?UTF-8?q?=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/itchy-carrots-design.md            |  7 +++++++
 .../base/inputs/search-input/search-input.vue | 19 ++++++++++++++-----
 .../inputs/search-input/stories/options.ts    |  2 ++
 .../stories/search-input.stories.ts           | 12 +++++++++++-
 .../base/inputs/search-input/types.ts         |  1 +
 .../search-input/components/search-input.tsx  | 17 ++++++++++++-----
 .../inputs/search-input/components/types.ts   |  1 +
 .../inputs/search-input/stories/dummy-data.ts |  1 +
 .../stories/search-input.stories.tsx          | 16 +++++++++++++++-
 9 files changed, 64 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/itchy-carrots-design.md

diff --git a/.changeset/itchy-carrots-design.md b/.changeset/itchy-carrots-design.md
new file mode 100644
index 000000000..41201de62
--- /dev/null
+++ b/.changeset/itchy-carrots-design.md
@@ -0,0 +1,7 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+---
+
+- feat(search-input): 選択したアイテムに親階層のラベルを含める
+- feat(search-input): 選択時に指定されたアイテムのラベルを表示できるようにする
diff --git a/packages/wiz-ui-next/src/components/base/inputs/search-input/search-input.vue b/packages/wiz-ui-next/src/components/base/inputs/search-input/search-input.vue
index 1b84b58a4..ac5bcc168 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/search-input/search-input.vue
+++ b/packages/wiz-ui-next/src/components/base/inputs/search-input/search-input.vue
@@ -15,7 +15,11 @@
             <div v-for="item in checkValues" :key="item">
               <span :class="styles.searchInputInnerBoxSelectedItemStyle">
                 <span :class="styles.searchInputInnerBoxSelectedLabelStyle">
-                  {{ valueToOption.get(item)?.label }}
+                  {{
+                    valueToOption.get(item)?.selectedItemLabel
+                      ? valueToOption.get(item)?.selectedItemLabel
+                      : valueToOption.get(item)?.label
+                  }}
                 </span>
                 <button
                   type="button"
@@ -289,10 +293,15 @@ const valueToOption = computed(() => {
 
   const flatten = (options: SearchInputOption[]): SearchInputOption[] => {
     return options.flatMap((option) => {
-      if (option.children) {
-        return [option, ...flatten(option.children)];
-      }
-      return [option];
+      if (!option.children) return [option];
+
+      const children = option.children.map((child) => ({
+        ...child,
+        // 要件上、全角空白のため無視
+        // eslint-disable-next-line no-irregular-whitespace
+        label: `${option.label}　${child.label}`,
+      }));
+      return [option, ...flatten(children)];
     });
   };
 
diff --git a/packages/wiz-ui-next/src/components/base/inputs/search-input/stories/options.ts b/packages/wiz-ui-next/src/components/base/inputs/search-input/stories/options.ts
index 6c4a34d80..139ae76c6 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/search-input/stories/options.ts
+++ b/packages/wiz-ui-next/src/components/base/inputs/search-input/stories/options.ts
@@ -8,6 +8,7 @@ export const defaultOption: SearchInputOption[] = [
       {
         label: "保険商品1",
         value: 2,
+        selectedItemLabel: "保険商品1 / プランA",
       },
       {
         label: "保険商品2",
@@ -471,6 +472,7 @@ export const simpleOption: SearchInputOption[] = [
   {
     label: "選択肢3",
     value: 3,
+    selectedItemLabel: "選択肢3 / サンプル",
   },
 ];
 
diff --git a/packages/wiz-ui-next/src/components/base/inputs/search-input/stories/search-input.stories.ts b/packages/wiz-ui-next/src/components/base/inputs/search-input/stories/search-input.stories.ts
index cd02f3bbe..1638d088a 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/search-input/stories/search-input.stories.ts
+++ b/packages/wiz-ui-next/src/components/base/inputs/search-input/stories/search-input.stories.ts
@@ -63,7 +63,7 @@ const Template =
   (args) => ({
     components: { WizSearchInput },
     setup() {
-      const values = ref<number[]>([]);
+      const values = ref<number[]>(args.modelValue ? args.modelValue : []);
       const openPopup = ref(open);
       const toggle = (value: boolean) => {
         openPopup.value = value;
@@ -177,3 +177,13 @@ ShowSelectedItemTag.args = {
   options: simpleOption,
   showSelectedItem: true,
 };
+
+export const SelectedItemLabel = Template(true).bind({});
+SelectedItemLabel.args = {
+  placeholder: "氏名・ID・電話番号で検索",
+  singleSelect: true,
+  inputWidth: "15rem",
+  options: simpleOption,
+  showSelectedItem: true,
+  modelValue: [3],
+};
diff --git a/packages/wiz-ui-next/src/components/base/inputs/search-input/types.ts b/packages/wiz-ui-next/src/components/base/inputs/search-input/types.ts
index a437ced2f..b6e317eb4 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/search-input/types.ts
+++ b/packages/wiz-ui-next/src/components/base/inputs/search-input/types.ts
@@ -5,6 +5,7 @@ export type Tag = {
 export type SearchInputOption = {
   label: string;
   value: number;
+  selectedItemLabel?: string;
   children?: SearchInputOption[];
   tag?: Tag;
 };
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-input.tsx b/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-input.tsx
index 266f6a898..f31a425f9 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-input.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-input.tsx
@@ -88,10 +88,15 @@ const SearchInput: FC<Props> = ({
 
     const flatten = (options: SearchInputOption[]): SearchInputOption[] => {
       return options.flatMap((option) => {
-        if (option.children) {
-          return [option, ...flatten(option.children)];
-        }
-        return [option];
+        if (!option.children) return [option];
+
+        const children = option.children.map((child) => ({
+          ...child,
+          // 要件上、全角空白のため無視
+          // eslint-disable-next-line no-irregular-whitespace
+          label: `${option.label}　${child.label}`,
+        }));
+        return [option, ...flatten(children)];
       });
     };
 
@@ -143,7 +148,9 @@ const SearchInput: FC<Props> = ({
                   <span
                     className={styles.searchInputInnerBoxSelectedLabelStyle}
                   >
-                    {valueToOptions.get(value)?.label}
+                    {valueToOptions.get(value)?.selectedItemLabel
+                      ? valueToOptions.get(value)?.selectedItemLabel
+                      : valueToOptions.get(value)?.label}
                   </span>
                   <button
                     type="button"
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-input/components/types.ts b/packages/wiz-ui-react/src/components/base/inputs/search-input/components/types.ts
index a437ced2f..b6e317eb4 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/search-input/components/types.ts
+++ b/packages/wiz-ui-react/src/components/base/inputs/search-input/components/types.ts
@@ -5,6 +5,7 @@ export type Tag = {
 export type SearchInputOption = {
   label: string;
   value: number;
+  selectedItemLabel?: string;
   children?: SearchInputOption[];
   tag?: Tag;
 };
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-input/stories/dummy-data.ts b/packages/wiz-ui-react/src/components/base/inputs/search-input/stories/dummy-data.ts
index df55c5413..bb90d121f 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/search-input/stories/dummy-data.ts
+++ b/packages/wiz-ui-react/src/components/base/inputs/search-input/stories/dummy-data.ts
@@ -12,6 +12,7 @@ export const normalOptions: SearchInputOption[] = [
       {
         label: "保険商品1",
         value: 2,
+        selectedItemLabel: "保険商品1 / プランA",
       },
       {
         label: "保険商品2",
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-input/stories/search-input.stories.tsx b/packages/wiz-ui-react/src/components/base/inputs/search-input/stories/search-input.stories.tsx
index 2f128cfa1..1aea9af74 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/search-input/stories/search-input.stories.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/search-input/stories/search-input.stories.tsx
@@ -25,7 +25,9 @@ type Story = StoryObj<typeof WizSearchInput>;
 
 const Template: Story = {
   render: (args) => {
-    const [values, setValues] = useState<number[]>([]);
+    const [values, setValues] = useState<number[]>(
+      args.values ? args.values : []
+    );
     return (
       <div>
         <div>values:[{values.join(", ")}]</div>
@@ -156,3 +158,15 @@ export const ShowSelectedItemTag: Story = {
     showSelectedItem: true,
   },
 };
+
+export const SelectedItemLabel: Story = {
+  ...Template,
+  args: {
+    options: normalOptions,
+    placeholder: "氏名・ID・電話番号で検索",
+    singleSelect: true,
+    inputWidth: "15rem",
+    showSelectedItem: true,
+    values: [2],
+  },
+};