feat: more usable select

Author: shiftpsh

example/src/stories/Select.stories.tsx

@@ -70,3 +70,35 @@ CustomRender.args = {
     </>
   ),
 }
+
+export const CustomTypes = Template.bind({})
+CustomTypes.args = {
+  value: 'Select',
+  items: [
+    {
+      value: 'kr',
+      icon: 'https://flagicons.lipis.dev/flags/4x3/kr.svg',
+      label: 'Korea',
+    },
+    {
+      value: 'gb',
+      icon: 'https://flagicons.lipis.dev/flags/4x3/gb.svg',
+      label: 'United Kingdom',
+    },
+    {
+      value: 'us',
+      icon: 'https://flagicons.lipis.dev/flags/4x3/us.svg',
+      label: 'United States',
+    },
+    {
+      value: 'jp',
+      icon: 'https://flagicons.lipis.dev/flags/4x3/jp.svg',
+      label: 'Japan',
+    },
+  ],
+  render: (s: { value: string; icon: string; label: string }) => (
+    <>
+      <img src={s.icon} alt={s.label} style={{ height: '1em' }} /> {s.label}
+    </>
+  ),
+}

src/components/Select.tsx

@@ -32,7 +32,7 @@ import React, {
   useState
 } from 'react'
 import { IoChevronDown } from 'react-icons/io5'
-import { PC, PP, PR } from '../types/PolymorphicElementProps'
+import { PP, PR } from '../types/PolymorphicElementProps'
 import { cssClickable, cssDisablable } from '../utils/styles'
 import { ListItem, ListItemProps } from './$List'
 import { Centering } from './Centering'
@@ -87,7 +87,7 @@ const SelectInputAdornment = styled(Centering)`
 
 type SelectItemNode = string | { value: string }
 
-export interface SelectProps<T extends SelectItemNode = string> {
+export interface SelectProps<T extends SelectItemNode> {
   fullWidth?: boolean
   disableEllipsis?: boolean
   items?: T[]
@@ -97,7 +97,7 @@ export interface SelectProps<T extends SelectItemNode = string> {
   ListItemProps?: Partial<PP<'div', ListItemProps>>
 }
 
-export const Select: PC<'button', SelectProps> = React.forwardRef(
+export const Select = React.forwardRef(
   <T extends ElementType, E extends SelectItemNode>(
     props: PP<T, SelectProps<E>>,
     ref?: PR<T>