Update Select for sub menus

Author: forestream

packages/components/src/components/Select/IconArrow.tsx

@@ -0,0 +1,24 @@
+import { css } from '@devup-ui/react'
+import clsx from 'clsx'
+import { ComponentProps } from 'react'
+
+export function IconArrow({ className, ...props }: ComponentProps<'svg'>) {
+  return (
+    <svg
+      className={clsx(css({ color: '#8b8e9c', styleOrder: 1 }), className)}
+      fill="none"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M6.1953 12.4714C5.93495 12.211 5.93495 11.7889 6.1953 11.5286L9.7239 7.99996L6.1953 4.47136C5.93495 4.21102 5.93495 3.78891 6.1953 3.52856C6.45565 3.26821 6.87776 3.26821 7.13811 3.52856L11.1381 7.52856C11.3985 7.7889 11.3985 8.21101 11.1381 8.47136L7.13811 12.4714C6.87776 12.7317 6.45565 12.7317 6.1953 12.4714Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}

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

@@ -1,3 +1,4 @@
+import { css, Flex } from '@devup-ui/react'
 import { Meta, StoryObj } from '@storybook/react-vite'
 
 import {
@@ -7,6 +8,7 @@ import {
   SelectOption,
   SelectTrigger,
 } from '.'
+import { IconArrow } from './IconArrow'
 
 type Story = StoryObj<typeof meta>
 
@@ -34,6 +36,30 @@ export const Default: Story = {
         <SelectDivider />
         <SelectOption>Option 3</SelectOption>
         <SelectOption disabled>Option 4</SelectOption>
+        <Select>
+          <SelectTrigger asChild>
+            <SelectOption>
+              <Flex
+                alignItems="center"
+                className={css({ w: '100%' })}
+                justifyContent="space-between"
+                w="100%"
+              >
+                Option 5<IconArrow />
+              </Flex>
+            </SelectOption>
+          </SelectTrigger>
+          <SelectContainer
+            className={css({
+              right: '0',
+              top: '0',
+              transform: 'translateX(100%)',
+            })}
+          >
+            <SelectOption>Option 6</SelectOption>
+            <SelectOption>Option 7</SelectOption>
+          </SelectContainer>
+        </Select>
       </SelectContainer>
     </Select>
   ),

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

@@ -3,8 +3,12 @@
 import { Box, css, Flex, VStack } from '@devup-ui/react'
 import clsx from 'clsx'
 import {
+  Children,
   ComponentProps,
   createContext,
+  JSX,
+  JSXElementConstructor,
+  ReactElement,
   useContext,
   useEffect,
   useRef,
@@ -17,7 +21,7 @@ import { IconCheck } from './IconCheck'
 type SelectType = 'default' | 'radio' | 'checkbox'
 type SelectValue<T extends SelectType> = T extends 'radio' ? string : string[]
 
-interface SelectProps {
+interface SelectProps extends ComponentProps<'div'> {
   open?: boolean
   onOpenChange?: (open: boolean) => void
   children: React.ReactNode
@@ -45,6 +49,7 @@ export function Select({
   children,
   open: openProp,
   onOpenChange,
+  ...props
 }: SelectProps) {
   const ref = useRef<HTMLDivElement>(null)
   const [open, setOpen] = useState(openProp ?? false)
@@ -90,28 +95,39 @@ export function Select({
         type,
       }}
     >
-      <Box ref={ref} display="inline-block" pos="relative">
+      <Box ref={ref} display="inline-block" pos="relative" {...props}>
         {children}
       </Box>
     </SelectContext.Provider>
   )
 }
 
+interface SelectTriggerProps extends ComponentProps<typeof Button> {
+  asChild?: boolean
+}
 export function SelectTrigger({
   className,
   children,
+  asChild,
   ...props
-}: ComponentProps<typeof Button>) {
+}: SelectTriggerProps) {
   const { open, setOpen } = useSelect()
   const handleClick = () => {
     setOpen(!open)
   }
 
+  if (asChild) {
+    const element = Children.only(children) as ReactElement<
+      ComponentProps<keyof JSX.IntrinsicElements | JSXElementConstructor<any>>
+    >
+    const Comp = element.type
+    return <Comp onClick={handleClick} {...element.props} />
+  }
+
   return (
     <Button
       className={clsx(
         css({
-          pos: 'relative',
           borderRadius: '8px',
         }),
         className,
@@ -136,9 +152,9 @@ export function SelectContainer({ children, ...props }: ComponentProps<'div'>) {
       bottom="-4px"
       boxShadow="0 2px 2px 0 $base10"
       gap="6px"
+      h="fit-content"
       p="10px"
       pos="absolute"
-      styleOrder={1}
       transform="translateY(100%)"
       userSelect="none"
       w="232px"
@@ -175,21 +191,23 @@ export function SelectOption({
     handleClose()
   }
 
-  const isChecked = Array.isArray(value)
+  const isSelected = Array.isArray(value)
     ? value.includes(children as string)
     : value === children
 
+  const changesOnHover = !disabled && !(type === 'radio' && isSelected)
+
   return (
     <Flex
       _hover={
-        !disabled && {
+        changesOnHover && {
           bg: '$primaryBg',
         }
       }
       alignItems="center"
       borderRadius="8px"
-      color={disabled ? '$selectDisabled' : isChecked ? '$primary' : '$title'}
-      cursor={disabled ? 'default' : 'pointer'}
+      color={disabled ? '$selectDisabled' : isSelected ? '$primary' : '$title'}
+      cursor={changesOnHover ? 'pointer' : 'default'}
       gap={
         {
           checkbox: '10px',
@@ -202,20 +220,20 @@ export function SelectOption({
       px="10px"
       styleOrder={1}
       transition="background-color 0.1s ease-in-out"
-      typography={isChecked ? 'inputBold' : 'inputText'}
+      typography={isSelected ? 'inputBold' : 'inputText'}
       {...props}
     >
       {
         {
           checkbox: (
             <Box
-              bg={isChecked ? '$primary' : '$border'}
+              bg={isSelected ? '$primary' : '$border'}
               borderRadius="4px"
               boxSize="18px"
               pos="relative"
               transition="background-color 0.1s ease-in-out"
             >
-              {isChecked && (
+              {isSelected && (
                 <IconCheck
                   className={css({
                     position: 'absolute',
@@ -229,7 +247,7 @@ export function SelectOption({
           ),
           radio: (
             <>
-              {isChecked && (
+              {isSelected && (
                 <Box
                   borderRadius="4px"
                   boxSize="18px"