fix(SW-1509): removed support for plain array items in order to handle proper props extending

various fixes for supporting default selected

packages/design-system/lib/components/Select/Select.tsx

@@ -12,7 +12,7 @@ import { Typography } from '../Typography'
 import { SelectItem } from './SelectItem'
 import { SelectFilter } from './SelectFilter'
 
-import type { SelectProps } from './types'
+import type { SelectProps, SelectFilterProps } from './types'
 
 import styles from './select.module.css'
 
@@ -23,10 +23,9 @@ export function Select({
   isDisabled,
   icon,
   itemIcon,
-  enableFiltering,
   ...props
-}: SelectProps) {
-  if (enableFiltering) {
+}: SelectProps | SelectFilterProps) {
+  if ('enableFiltering' in props) {
     return (
       <SelectFilter
         name={name}
@@ -34,7 +33,6 @@ export function Select({
         items={items}
         icon={icon}
         itemIcon={itemIcon}
-        isDisabled={isDisabled}
         {...props}
       />
     )
@@ -59,22 +57,26 @@ export function Select({
           />
         ) : null}
         <SelectValue className={cx(styles.displayText, styles.selectValue)}>
-          {({ isPlaceholder, selectedText }) => (
-            <>
-              <Typography
-                variant={
-                  isPlaceholder ? 'Body/Paragraph/mdRegular' : 'Label/xsRegular'
-                }
-              >
-                <span className={styles.label}>{label}</span>
-              </Typography>
-              {selectedText ? (
-                <Typography variant="Body/Paragraph/mdRegular">
-                  <span>{selectedText}</span>
+          {({ selectedText }) => {
+            return (
+              <>
+                <Typography
+                  variant={
+                    selectedText
+                      ? 'Label/xsRegular'
+                      : 'Body/Paragraph/mdRegular'
+                  }
+                >
+                  <span className={styles.label}>{label}</span>
                 </Typography>
-              ) : null}
-            </>
-          )}
+                {selectedText ? (
+                  <Typography variant="Body/Paragraph/mdRegular">
+                    <span>{selectedText}</span>
+                  </Typography>
+                ) : null}
+              </>
+            )
+          }}
         </SelectValue>
 
         <MaterialIcon
@@ -88,27 +90,16 @@ export function Select({
 
       <Popover className={styles.popover} shouldFlip={false}>
         <ListBox className={styles.listBox}>
-          {items.map((item) =>
-            typeof item === 'object' ? (
-              <SelectItem
-                key={item.label}
-                id={item.label}
-                icon={item.icon || itemIcon}
-                isDisabled={item.isDisabled}
-              >
-                {item.label}
-              </SelectItem>
-            ) : (
-              <SelectItem
-                key={item}
-                id={item}
-                icon={itemIcon}
-                isDisabled={isDisabled}
-              >
-                {item.toString()}
-              </SelectItem>
-            )
-          )}
+          {items.map((item) => (
+            <SelectItem
+              key={item.value}
+              id={item.value}
+              icon={item.icon || itemIcon}
+              isDisabled={item.isDisabled}
+            >
+              {item.label}
+            </SelectItem>
+          ))}
         </ListBox>
       </Popover>
     </AriaSelect>