Fix type

- Fix onClick
- Add showCheck prop

Author: forestream

packages/components/src/components/Select/ControlledCheckbox.tsx

@@ -46,7 +46,7 @@ export function ControlledCheckbox() {
           value={subValue}
         >
           <SelectTrigger asChild>
-            <SelectOption>
+            <SelectOption showCheck={false}>
               <Flex alignItems="center" justifyContent="space-between" w="100%">
                 Option 5<IconArrow />
               </Flex>

packages/components/src/components/Select/ControlledRadio.tsx

@@ -17,6 +17,10 @@ export function ControlledRadio() {
   const handleChange = (value: string) => {
     setValue(value)
   }
+  const [subValue, setSubValue] = useState('')
+  const handleSubChange = (value: string) => {
+    setSubValue(value)
+  }
   return (
     <Select onValueChange={handleChange} type="radio" value={value}>
       <SelectTrigger>Select {value}</SelectTrigger>
@@ -26,9 +30,9 @@ export function ControlledRadio() {
         <SelectDivider />
         <SelectOption value="Option 3">Option 3</SelectOption>
         <SelectOption value="Option 4">Option 4</SelectOption>
-        <Select type="radio">
+        <Select onValueChange={handleSubChange} type="radio" value={subValue}>
           <SelectTrigger asChild>
-            <SelectOption>
+            <SelectOption showCheck={false}>
               <Flex alignItems="center" justifyContent="space-between" w="100%">
                 Option 5<IconArrow />
               </Flex>
@@ -41,8 +45,26 @@ export function ControlledRadio() {
               transform: 'translateX(100%)',
             })}
           >
-            <SelectOption value="Option 6">Option 6</SelectOption>
-            <SelectOption value="Option 7">Option 7</SelectOption>
+            <SelectOption
+              onClick={(value) => {
+                if (value) {
+                  setSubValue(value)
+                }
+              }}
+              value="Option 6"
+            >
+              Option 6
+            </SelectOption>
+            <SelectOption
+              onClick={(value) => {
+                if (value) {
+                  setSubValue(value)
+                }
+              }}
+              value="Option 7"
+            >
+              Option 7
+            </SelectOption>
           </SelectContainer>
         </Select>
       </SelectContainer>

packages/components/src/components/Select/index.tsx

@@ -183,16 +183,21 @@ export function SelectContainer({ children, ...props }: ComponentProps<'div'>) {
 }
 
 interface SelectOptionProps extends Omit<ComponentProps<'div'>, 'onClick'> {
-  onClick?: (value?: string, e?: React.MouseEvent<HTMLDivElement>) => void
+  onClick?: (
+    value: string | undefined,
+    e?: React.MouseEvent<HTMLDivElement>,
+  ) => void
   disabled?: boolean
   value?: string
+  showCheck?: boolean
 }
 
 export function SelectOption({
   disabled,
   onClick,
   children,
   value,
+  showCheck = true,
   ...props
 }: SelectOptionProps) {
   const { setOpen, setValue, value: selectedValue, type } = useSelect()
@@ -202,7 +207,10 @@ export function SelectOption({
     setOpen(false)
   }
 
-  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+  const handleClick = (
+    value: string | undefined,
+    e: React.MouseEvent<HTMLDivElement>,
+  ) => {
     if (onClick) {
       onClick(value, e)
       return
@@ -239,14 +247,14 @@ export function SelectOption({
         }[type]
       }
       h="40px"
-      onClick={disabled ? undefined : handleClick}
+      onClick={disabled ? undefined : (e) => handleClick(value, e)}
       px="10px"
       styleOrder={1}
       transition="background-color 0.1s ease-in-out"
       typography={isSelected ? 'inputBold' : 'inputText'}
       {...props}
     >
-      {
+      {showCheck &&
         {
           checkbox: (
             <Box
@@ -291,8 +299,7 @@ export function SelectOption({
             </>
           ),
           default: null,
-        }[type]
-      }
+        }[type]}
       {children}
     </Flex>
   )