Merge pull request #22 from kaiachain/dev

Update version to v1.0.4
kaiachain · Nov 27, 2024 · 080812d · 080812d
2 parents e150b3b + 7c2e922
commit 080812d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kaiachain/kaia-design-system",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",

diff --git a/src/components/SelectBox/SelectBox.tsx b/src/components/SelectBox/SelectBox.tsx
@@ -1,4 +1,4 @@
-import { ReactElement, useState } from 'react'
+import { ReactElement, useMemo, useState } from 'react'
 import styled from '@emotion/styled'
 import { keyframes } from '@emotion/react'
 import _ from 'lodash'
@@ -163,6 +163,25 @@ export interface KaSelectBoxProps {
   disabled?: boolean
 }
 
+const getLabelForValue = (
+  options: KaSelectBoxOptionListType[],
+  value: string,
+): string | undefined => {
+  for (const option of options) {
+    if (option.value === value) {
+      return option.label
+    }
+
+    if (option.subItems) {
+      const childLabel = getLabelForValue(option.subItems, value)
+      if (childLabel) {
+        return childLabel
+      }
+    }
+  }
+  return undefined
+}
+
 export const KaSelectBox = ({
   optionList,
   placeholder,
@@ -199,29 +218,37 @@ export const KaSelectBox = ({
   ) => {
     if (option.subItems) {
       if (!isChild) {
-        setSelected(option.label)
+        setSelected(option.value)
       }
       onSelect('')
       toggleExpand(option.value)
     } else {
       if (!isChild) {
         setSelected('')
       }
-      onSelect(option.label)
+      onSelect(option.value)
       setExpandedItems(new Set())
       setIsOpen(false)
       setOnFocus(false)
     }
   }
 
+  const selectedLabel = useMemo(
+    () =>
+      getLabelForValue(optionList, selectedValue) ||
+      placeholder ||
+      'Not Selected',
+    [optionList, selectedValue, placeholder],
+  )
+
   const renderItem = (
     option: KaSelectBoxOptionListType,
     level: number = 0,
     isChild: boolean = false,
     indentIcon: boolean,
   ) => {
     const isSelected =
-      option.label === selectedValue || option.label === selected
+      option.value === selectedValue || option.value === selected
     const isExpanded = expandedItems.has(option.value)
     const src = option.img
 
@@ -313,7 +340,7 @@ export const KaSelectBox = ({
               whiteSpace: 'nowrap',
             }}
           >
-            {selectedValue || placeholder || 'Not Selected'}
+            {selectedLabel}
           </KaText>
           {isOpen ? (
             <StyledIconChevronBottom style={{ transform: 'rotate(-180deg)' }} />