✨ Add support to infer types from itemGroups for Select

Author: Frontendland

src/components/Select/Select.astro

@@ -27,20 +27,24 @@ const {
     ...rest
 } = Astro.props
 
-const inputRestProps = Object.fromEntries(
-    Object.entries(rest).filter(([key]) => key.includes('data'))
-)
-
 const classes = classNames([
     styles.select,
     disabled && styles.disabled,
     className
 ])
+
+const inferredValue = rest.itemGroups.map(group => group.items)
+    .flat()
+    .find(item => item.value === value)?.name
+
+const inputRestProps = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key.includes('data'))
+)
 ---
 
 <Input
     type="text"
-    value={value}
+    value={(value && inferredValue) ? inferredValue : value}
     readonly={true}
     disabled={disabled}
     placeholder={placeholder}

src/components/Select/Select.svelte

@@ -16,7 +16,7 @@
 
     import styles from './select.module.scss'
 
-    import type { ListEventType } from '../List/list'
+    import type { ListEventType, ListProps } from '../List/list'
 
     export let name: SvelteSelectProps['name'] = ''
     export let value: SvelteSelectProps['value'] = ''
@@ -42,6 +42,11 @@
         styles.popover
     ])
 
+    const inferredValue = $$restProps.itemGroups
+        .map((group: ListProps['itemGroups'][0]) => group.items)
+        .flat()
+        .find((item: ListProps['itemGroups'][0]['items'][0]) => item.value === value)?.name
+
     const inputRestProps = Object.fromEntries(
         Object.entries($$restProps).filter(([key]) => key.includes('data'))
     )
@@ -110,7 +115,7 @@
 
 <Input
     type="text"
-    value={value || null}
+    value={(value && inferredValue) ? inferredValue : value}
     readonly={true}
     disabled={disabled}
     placeholder={placeholder || null}

src/components/Select/Select.tsx

@@ -30,7 +30,11 @@ const Select = ({
     onChange,
     ...rest
 }: ReactSelectProps) => {
-    const [val, setValue] = useState(value)
+    const inferredValue = rest.itemGroups.map(group => group.items)
+        .flat()
+        .find(item => item.value === value)?.name
+
+    const [val, setValue] = useState((value && inferredValue) ? inferredValue : value)
 
     const classes = classNames([
         styles.select,

src/pages/components/select.astro

@@ -81,6 +81,14 @@ const sections = getSections({
                 />
             </ComponentWrapper>
 
+            <ComponentWrapper title="With inferred value (from itemGroups)">
+                <section.component
+                    name="with-inferred-value"
+                    value="new"
+                    itemGroups={listWithStates}
+                />
+            </ComponentWrapper>
+
             <ComponentWrapper title="Disabled">
                 <section.component
                     name="disabled"