fix(Select): #413 (#414)

* fix(Select): #413

* fix: Revert update by prettier.

src/Select/Select.test.tsx

@@ -6,8 +6,8 @@ import { render, screen } from '@testing-library/react'
 import Select from './index'
 import userEvent from '@testing-library/user-event'
 import { SelectProps } from './Select'
-import { ComponentColor, ComponentSize } from '../types';
-import Checkbox from '../Checkbox';
+import { ComponentColor, ComponentSize } from '../types'
+import Checkbox from '../Checkbox'
 
 const TestComponent = (props?: Omit<SelectProps, 'children'>) => {
   return (
@@ -170,4 +170,44 @@ describe('Select', () => {
     render(<TestComponent className={testClass} />)
     expect(screen.getByRole('combobox')).toHaveClass(testClass)
   })
+  it('Should render single item', () => {
+    render(
+      <Select>
+        <Select.Option value="" disabled>
+          Single Item
+        </Select.Option>
+      </Select>
+    )
+  })
+  it('#413', () => {
+    const options = [
+      {
+        label: 'a',
+        value: 'a',
+        disabled: false,
+      },
+      {
+        label: 'b',
+        value: 'b',
+        disabled: false,
+      },
+      {
+        label: 'c',
+        value: 'c',
+        disabled: false,
+      },
+    ]
+    render(
+      <Select>
+        <Select.Option value="" disabled>
+          Select Item
+        </Select.Option>
+        {options.map((o) => (
+          <Select.Option key={o.label} value={o.value} disabled={o.disabled}>
+            {o.label}
+          </Select.Option>
+        ))}
+      </Select>
+    )
+  })
 })

src/Select/Select.tsx

@@ -2,7 +2,12 @@ import React, { ReactElement } from 'react'
 import clsx from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
-import { IComponentBaseProps, ComponentColor, ComponentSize } from '../types'
+import {
+  IComponentBaseProps,
+  ComponentColor,
+  ComponentSize,
+  ListOrItem,
+} from '../types'
 
 import SelectOption, { SelectOptionProps } from './SelectOption'
 
@@ -11,7 +16,7 @@ export type SelectProps = Omit<
   'size' | 'color'
 > &
   IComponentBaseProps & {
-    children: ReactElement<SelectOptionProps>[]
+    children: ListOrItem<ReactElement<SelectOptionProps>>
     size?: ComponentSize
     color?: ComponentColor
     bordered?: boolean

src/types.ts

@@ -23,3 +23,5 @@ export type ComponentSize = typeof componentSizes[number]
 export type ComponentStatus = typeof componentStatuses[number]
 export type ComponentBrandColors = typeof brandColors[number]
 export type ComponentBgColors = typeof bgColors[number]
+
+export type ListOrItem<T> = T[] | T | Array<T | T[]>