Fix select componenet

Author: belltalion

packages/components/package.json

@@ -22,7 +22,8 @@
     "lint": "eslint",
     "build": "tsc && vite build",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "package": "pnpm pack --pack-destination \"../../dist\""
   },
   "publishConfig": {
     "access": "public"

packages/components/src/__tests__/index.browser.test.ts

@@ -14,8 +14,9 @@ describe('export', () => {
       StepperDecreaseButton: expect.any(Function),
       StepperIncreaseButton: expect.any(Function),
       StepperInput: expect.any(Function),
-      useSelect: expect.any(Function),
       useStepper: expect.any(Function),
+      SelectContext: expect.any(Object),
+      useSelect: expect.any(Function),
     })
   })
 })

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

@@ -43,15 +43,23 @@ export const ControlledCheckboxStory: Story = {
   render: () => <ControlledCheckbox />,
 }
 
+export const SelectWithOptionsStory: Story = {
+  args: {},
+  render: () => <SelectWithOptions />,
+}
+
 export default meta
 
 function DefaultComponent(
   props: Omit<ComponentProps<typeof Select>, 'children'>,
 ) {
   return (
     <Select {...props} defaultValue={['Option 1']} onValueChange={() => {}}>
-      <SelectTrigger>Select</SelectTrigger>
-      <SelectContainer>
+      <SelectTrigger>Select2</SelectTrigger>
+      <SelectContainer
+      // x={10}
+      // y={10}
+      >
         <SelectOption disabled value="Option 1">
           Option 1
         </SelectOption>
@@ -69,13 +77,7 @@ function DefaultComponent(
               </Flex>
             </SelectOption>
           </SelectTrigger>
-          <SelectContainer
-            className={css({
-              right: '0',
-              top: '0',
-              transform: 'translateX(100%)',
-            })}
-          >
+          <SelectContainer>
             <SelectOption value="Option 6">Option 6</SelectOption>
             <SelectOption value="Option 7">Option 7</SelectOption>
           </SelectContainer>
@@ -200,3 +202,25 @@ function ControlledRadio() {
     </Select>
   )
 }
+
+function SelectWithOptions() {
+  return (
+    <>
+      <Select
+        options={[
+          { label: 'Option 1', value: 'Option 1' },
+          { label: 'Option 2', value: 'Option 2', disabled: true },
+          {
+            label: 'Option 3',
+            value: 'Option 3',
+            onClick: () => {
+              console.log('Option 3')
+            },
+          },
+        ]}
+      >
+        title
+      </Select>
+    </>
+  )
+}

packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Select > should render 1`] = `
 <div>
   <div
-    class="display-0-inline-block--1 position-0-relative--1 box-sizing-0-border-box-1137980104803605758-1  "
+    class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1  "
   >
     <button
       aria-expanded="false"

packages/components/src/components/Select/__tests__/index.browser.test.tsx

@@ -94,7 +94,7 @@ describe('Select', () => {
   it('should call onValueChange function when it is provided', () => {
     const onValueChange = vi.fn()
     const { container } = render(
-      <Select onValueChange={onValueChange} type="radio">
+      <Select onChange={onValueChange} type="radio">
         {children}
       </Select>,
     )
@@ -371,4 +371,16 @@ describe('Select', () => {
     const svg = container.querySelector('svg')
     expect(svg).not.toBeInTheDocument()
   })
+
+  it('should render with options properties', () => {
+    const { container } = render(
+      <Select options={[{ label: 'Option 1', value: 'Option 1' }]}>
+        Select
+      </Select>,
+    )
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const option1 = container.querySelector('[data-value="Option 1"]')
+    expect(option1).toBeInTheDocument()
+  })
 })

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

@@ -5,42 +5,23 @@ import clsx from 'clsx'
 import {
   Children,
   ComponentProps,
-  createContext,
   JSX,
   JSXElementConstructor,
   ReactElement,
-  useContext,
   useEffect,
   useRef,
   useState,
 } from 'react'
 
+import { SelectContext, useSelect } from '../../contexts/useSelect'
+import { SelectType, SelectValue } from '../../types/select'
 import { Button } from '../Button'
 import { IconCheck } from './IconCheck'
 
-type SelectType = 'default' | 'radio' | 'checkbox'
-type SelectValue<T extends SelectType> = T extends 'radio' ? string : string[]
-
-const SelectContext = createContext<{
-  open: boolean
-  setOpen: (open: boolean) => void
-  value: SelectValue<SelectType>
-  setValue: (value: string) => void
-  type: SelectType
-} | null>(null)
-
-export const useSelect = () => {
-  const context = useContext(SelectContext)
-  if (!context) {
-    throw new Error('useSelect must be used within a Select')
-  }
-  return context
-}
-
-interface SelectProps extends ComponentProps<'div'> {
+interface SelectProps extends Omit<ComponentProps<'div'>, 'onChange'> {
   defaultValue?: SelectValue<SelectType>
   value?: SelectValue<SelectType>
-  onValueChange?: (value: string) => void
+  onChange?: (value: string) => void
   defaultOpen?: boolean
   open?: boolean
   onOpenChange?: (open: boolean) => void
@@ -58,19 +39,30 @@ interface SelectProps extends ComponentProps<'div'> {
     primaryBg?: string
   }
   typography?: keyof DevupThemeTypography
+  options?: {
+    label?: string
+    disabled?: boolean
+    onClick?: (
+      value: string | undefined,
+      e?: React.MouseEvent<HTMLDivElement>,
+    ) => void
+    showCheck?: boolean
+    value: string
+  }[]
 }
 
 export function Select({
   type = 'default',
   children,
   defaultValue,
   value: valueProp,
-  onValueChange,
+  onChange,
   defaultOpen,
   open: openProp,
   onOpenChange,
   colors,
   typography,
+  options,
   ...props
 }: SelectProps) {
   const ref = useRef<HTMLDivElement>(null)
@@ -94,7 +86,7 @@ export function Select({
   }
 
   const handleValueChange = (nextValue: string) => {
-    onValueChange?.(nextValue)
+    onChange?.(nextValue)
 
     if (type === 'default') return
     if (type === 'radio') {
@@ -116,12 +108,13 @@ export function Select({
         value: valueProp ?? value,
         setValue: handleValueChange,
         type,
+        ref,
       }}
     >
       <Box
         ref={ref}
         display="inline-block"
-        pos="relative"
+        h="fit-content"
         selectors={{
           '&, & *': {
             boxSizing: 'border-box',
@@ -142,7 +135,20 @@ export function Select({
         typography={typography}
         {...props}
       >
-        {children}
+        {options ? (
+          <>
+            <SelectTrigger>{children}</SelectTrigger>
+            <SelectContainer>
+              {options?.map((option) => (
+                <SelectOption {...option} key={'option-' + option.value}>
+                  {option.label ?? option.value}
+                </SelectOption>
+              ))}
+            </SelectContainer>
+          </>
+        ) : (
+          children
+        )}
       </Box>
     </SelectContext.Provider>
   )
@@ -206,25 +212,53 @@ export function SelectContainer({
   confirmButtonText = '완료',
   ...props
 }: SelectContainerProps) {
-  const { open, setOpen, type } = useSelect()
+  const { open, setOpen, type, ref } = useSelect()
 
   if (!open) return null
   return (
     <VStack
+      ref={(el) => {
+        if (!ref.current || !el) return
+        const combobox = ref.current
+
+        // 요소가 움직일 때마다(스크롤, 리사이즈 등) 위치를 갱신하도록 이벤트를 등록합니다.
+        const updatePosition = () => {
+          const { height, x, y } = combobox.getBoundingClientRect()
+
+          if (el.offsetHeight + y > window.innerHeight)
+            el.style.bottom = `${window.innerHeight - y + 10}px`
+          else el.style.top = `${y + height + 10}px`
+          if (el.offsetWidth + x > window.innerWidth)
+            el.style.left = `${x - el.offsetWidth + combobox.offsetWidth}px`
+          else el.style.left = `${x}px`
+        }
+
+        // 최초 위치 설정
+        updatePosition()
+
+        // 스크롤, 리사이즈, DOM 변경 등 요소 위치가 변할 수 있는 이벤트에 리스너 등록
+        window.addEventListener('scroll', updatePosition, true)
+        window.addEventListener('resize', updatePosition)
+
+        // 컴포넌트 언마운트 시 이벤트 해제
+        return () => {
+          window.removeEventListener('scroll', updatePosition, true)
+          window.removeEventListener('resize', updatePosition)
+        }
+      }}
       aria-label="Select container"
       bg="var(--inputBg, light-dark(#FFF,#2E2E2E))"
       border="1px solid var(--border, light-dark(#E4E4E4,#434343))"
       borderRadius="8px"
       bottom="-4px"
       boxShadow="0 2px 2px 0 var(--base10, light-dark(#0000001A,#FFFFFF1A))"
+      boxSize="fit-content"
       gap="6px"
-      h="fit-content"
+      minW="232px"
       p="10px"
-      pos="absolute"
+      pos="fixed"
       styleOrder={1}
-      transform="translateY(100%)"
       userSelect="none"
-      w="232px"
       zIndex={1}
       {...props}
     >
@@ -255,12 +289,12 @@ export function SelectContainer({
 }
 
 interface SelectOptionProps extends Omit<ComponentProps<'div'>, 'onClick'> {
+  value?: string
+  disabled?: boolean
   onClick?: (
     value: string | undefined,
     e?: React.MouseEvent<HTMLDivElement>,
   ) => void
-  disabled?: boolean
-  value?: string
   showCheck?: boolean
 }
 

packages/components/src/contexts/useSelect.ts

@@ -0,0 +1,21 @@
+import { createContext, useContext } from 'react'
+
+type SelectType = 'default' | 'radio' | 'checkbox'
+type SelectValue<T extends SelectType> = T extends 'radio' ? string : string[]
+
+export const SelectContext = createContext<{
+  open: boolean
+  setOpen: (open: boolean) => void
+  value: SelectValue<SelectType>
+  setValue: (value: string) => void
+  type: SelectType
+  ref: React.RefObject<HTMLDivElement | null>
+} | null>(null)
+
+export const useSelect = () => {
+  const context = useContext(SelectContext)
+  if (!context) {
+    throw new Error('useSelect must be used within a Select')
+  }
+  return context
+}

packages/components/src/index.ts

@@ -6,7 +6,6 @@ export {
   SelectDivider,
   SelectOption,
   SelectTrigger,
-  useSelect,
 } from './components/Select'
 export {
   Stepper,
@@ -16,3 +15,5 @@ export {
   StepperInput,
   useStepper,
 } from './components/Stepper'
+export { SelectContext, useSelect } from './contexts/useSelect'
+export type { SelectType, SelectValue } from './types/select'

packages/components/src/types/select.ts

@@ -0,0 +1,4 @@
+export type SelectType = 'default' | 'radio' | 'checkbox'
+export type SelectValue<T extends SelectType> = T extends 'radio'
+  ? string
+  : string[]