From 2b6fe17c32785b33e2e070e7ad3df74323b25976 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Thu, 10 Apr 2025 13:30:49 +0200
Subject: [PATCH] fix(SW-1509): add support for default selected key

fixed padding per list item
---
 .../lib/components/Select/Select.stories.tsx  |  9 +++++
 .../lib/components/Select/Select.tsx          | 37 +++++++++++--------
 .../lib/components/Select/SelectFilter.tsx    | 37 +++++++++++--------
 .../lib/components/Select/SelectItem.tsx      | 12 +++++-
 4 files changed, 61 insertions(+), 34 deletions(-)

diff --git a/packages/design-system/lib/components/Select/Select.stories.tsx b/packages/design-system/lib/components/Select/Select.stories.tsx
index 5c467e65a..5f42f9dcc 100644
--- a/packages/design-system/lib/components/Select/Select.stories.tsx
+++ b/packages/design-system/lib/components/Select/Select.stories.tsx
@@ -22,6 +22,15 @@ export const Default: Story = {
   },
 }
 
+export const DefaultSelected: Story = {
+  args: {
+    items: ['Foo', 'Bar', 'Baz'],
+    label: 'Select an item',
+    name: 'foo',
+    defaultSelectedKey: 'Foo',
+  },
+}
+
 export const ObjectItem: Story = {
   args: {
     items: [
diff --git a/packages/design-system/lib/components/Select/Select.tsx b/packages/design-system/lib/components/Select/Select.tsx
index 9a3d67998..dd918c7c8 100644
--- a/packages/design-system/lib/components/Select/Select.tsx
+++ b/packages/design-system/lib/components/Select/Select.tsx
@@ -88,22 +88,27 @@ export function Select({
 
       <Popover className={styles.popover} shouldFlip={false}>
         <ListBox className={styles.listBox}>
-          {items.map((item, idx) => (
-            <Typography variant="Body/Paragraph/mdRegular" key={idx}>
-              {typeof item === 'object' ? (
-                <SelectItem
-                  icon={item.icon || itemIcon}
-                  isDisabled={item.isDisabled}
-                >
-                  {item.label}
-                </SelectItem>
-              ) : (
-                <SelectItem icon={itemIcon} isDisabled={isDisabled}>
-                  {item.toString()}
-                </SelectItem>
-              )}
-            </Typography>
-          ))}
+          {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>
+            )
+          )}
         </ListBox>
       </Popover>
     </AriaSelect>
diff --git a/packages/design-system/lib/components/Select/SelectFilter.tsx b/packages/design-system/lib/components/Select/SelectFilter.tsx
index ec65f91c3..469ea4abb 100644
--- a/packages/design-system/lib/components/Select/SelectFilter.tsx
+++ b/packages/design-system/lib/components/Select/SelectFilter.tsx
@@ -81,22 +81,27 @@ export function SelectFilter({
         offset={22}
       >
         <ListBox className={styles.listBox}>
-          {items.map((item, idx) => (
-            <Typography variant="Body/Paragraph/mdRegular" key={idx}>
-              {typeof item === 'object' ? (
-                <SelectItem
-                  icon={item.icon || itemIcon}
-                  isDisabled={item.isDisabled}
-                >
-                  {item.label}
-                </SelectItem>
-              ) : (
-                <SelectItem icon={itemIcon} isDisabled={isDisabled}>
-                  {item.toString()}
-                </SelectItem>
-              )}
-            </Typography>
-          ))}
+          {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>
+            )
+          )}
         </ListBox>
       </Popover>
     </ComboBox>
diff --git a/packages/design-system/lib/components/Select/SelectItem.tsx b/packages/design-system/lib/components/Select/SelectItem.tsx
index 2e8efbc81..0a2d8a631 100644
--- a/packages/design-system/lib/components/Select/SelectItem.tsx
+++ b/packages/design-system/lib/components/Select/SelectItem.tsx
@@ -4,12 +4,20 @@ import styles from './select.module.css'
 import { MaterialIcon } from '../Icons/MaterialIcon'
 import { SelectItemProps } from './types'
 
-export function SelectItem({ children, icon, isDisabled }: SelectItemProps) {
+export function SelectItem({
+  children,
+  icon,
+  isDisabled,
+  ...props
+}: SelectItemProps) {
+  const iconColor = isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'
+
   return (
     <ListBoxItem
       className={styles.listBoxItem}
       textValue={children}
       isDisabled={isDisabled}
+      {...props}
     >
       {({ isSelected }) => (
         <>
@@ -17,7 +25,7 @@ export function SelectItem({ children, icon, isDisabled }: SelectItemProps) {
             <MaterialIcon
               icon={icon}
               size={24}
-              color={isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'}
+              color={iconColor}
               aria-hidden="true"
             />
           ) : null}