Add value prop to SelectOption

Author: forestream

packages/components/src/components/Select/Select.stories.tsx

@@ -36,15 +36,10 @@ export const Default: Story = {
         <SelectDivider />
         <SelectOption>Option 3</SelectOption>
         <SelectOption disabled>Option 4</SelectOption>
-        <Select>
+        <Select type="radio">
           <SelectTrigger asChild>
             <SelectOption>
-              <Flex
-                alignItems="center"
-                className={css({ w: '100%' })}
-                justifyContent="space-between"
-                w="100%"
-              >
+              <Flex alignItems="center" justifyContent="space-between" w="100%">
                 Option 5<IconArrow />
               </Flex>
             </SelectOption>
@@ -56,8 +51,8 @@ export const Default: Story = {
               transform: 'translateX(100%)',
             })}
           >
-            <SelectOption>Option 6</SelectOption>
-            <SelectOption>Option 7</SelectOption>
+            <SelectOption value="Option 6">Option 6</SelectOption>
+            <SelectOption value="Option 7">Option 7</SelectOption>
           </SelectContainer>
         </Select>
       </SelectContainer>

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

@@ -181,17 +181,20 @@ export function SelectContainer({ children, ...props }: ComponentProps<'div'>) {
   )
 }
 
-interface SelectOptionProps extends ComponentProps<'div'> {
+interface SelectOptionProps extends Omit<ComponentProps<'div'>, 'onClick'> {
+  onClick?: (value?: string, e?: React.MouseEvent<HTMLDivElement>) => void
   disabled?: boolean
+  value?: string
 }
 
 export function SelectOption({
   disabled,
   onClick,
   children,
+  value,
   ...props
 }: SelectOptionProps) {
-  const { setOpen, setValue, value, type } = useSelect()
+  const { setOpen, setValue, value: selectedValue, type } = useSelect()
 
   const handleClose = () => {
     if (type === 'checkbox') return
@@ -200,16 +203,19 @@ export function SelectOption({
 
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (onClick) {
-      onClick(e)
+      onClick(value, e)
       return
     }
-    setValue(children as string)
+    if (typeof value === 'string') setValue(value)
     handleClose()
   }
 
-  const isSelected = Array.isArray(value)
-    ? value.includes(children as string)
-    : value === children
+  const isSelected = {
+    default: false,
+    radio: selectedValue === value,
+    checkbox:
+      Array.isArray(selectedValue) && value && selectedValue.includes(value),
+  }[type]
 
   const changesOnHover = !disabled && !(type === 'radio' && isSelected)