From 77e4e9d2032c0fa4bc0e6568f52fa78209c9ef67 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Tue, 8 Apr 2025 12:54:48 +0200
Subject: [PATCH 01/10] feat(SW-1509): new select component in design-system

---
 .../lib/components/Select/Select.stories.tsx  | 26 +++++
 .../lib/components/Select/Select.tsx          | 89 +++++++++++++++++
 .../lib/components/Select/SelectItem.tsx      | 35 +++++++
 .../lib/components/Select/index.ts            |  2 +
 .../lib/components/Select/select.module.css   | 96 +++++++++++++++++++
 .../lib/components/Select/types.ts            | 25 +++++
 6 files changed, 273 insertions(+)
 create mode 100644 packages/design-system/lib/components/Select/Select.stories.tsx
 create mode 100644 packages/design-system/lib/components/Select/Select.tsx
 create mode 100644 packages/design-system/lib/components/Select/SelectItem.tsx
 create mode 100644 packages/design-system/lib/components/Select/index.ts
 create mode 100644 packages/design-system/lib/components/Select/select.module.css
 create mode 100644 packages/design-system/lib/components/Select/types.ts

diff --git a/packages/design-system/lib/components/Select/Select.stories.tsx b/packages/design-system/lib/components/Select/Select.stories.tsx
new file mode 100644
index 000000000..a04fb7e75
--- /dev/null
+++ b/packages/design-system/lib/components/Select/Select.stories.tsx
@@ -0,0 +1,26 @@
+import 'react-material-symbols/rounded'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Select } from './Select'
+
+const meta: Meta<typeof Select> = {
+  title: 'Components/Select',
+  component: Select,
+  argTypes: {},
+}
+
+export default meta
+
+type Story = StoryObj<typeof Select>
+
+export const Default: Story = {
+  args: {
+    icon: 'star',
+    itemIcon: 'check',
+    items: ['Foo', 'Bar', 'Baz'],
+    // items: new Array(30).fill(null).map((_, idx) => idx),
+    label: 'Select an item',
+    name: 'foo',
+  },
+}
diff --git a/packages/design-system/lib/components/Select/Select.tsx b/packages/design-system/lib/components/Select/Select.tsx
new file mode 100644
index 000000000..343c07f54
--- /dev/null
+++ b/packages/design-system/lib/components/Select/Select.tsx
@@ -0,0 +1,89 @@
+import {
+  Select as AriaSelect,
+  SelectValue,
+  Popover,
+  ListBox,
+  Button,
+} from 'react-aria-components'
+import { Typography } from '../Typography'
+
+import styles from './select.module.css'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { SelectItem } from './SelectItem'
+
+import type { SelectProps } from './types'
+
+export function Select({
+  name,
+  label,
+  items,
+  isRequired,
+  isDisabled,
+  icon,
+  itemIcon,
+}: SelectProps) {
+  const iconColor = isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'
+
+  return (
+    <AriaSelect
+      className={styles.select}
+      name={name}
+      aria-label={label}
+      isRequired={isRequired}
+      isDisabled={isDisabled}
+    >
+      <Button className={styles.button}>
+        {icon ? (
+          <MaterialIcon
+            icon={icon}
+            size={24}
+            color={iconColor}
+            aria-hidden="true"
+          />
+        ) : null}
+        <SelectValue className={styles.selectValue}>
+          {({ isPlaceholder, selectedText }) => (
+            <>
+              <Typography
+                variant={
+                  isPlaceholder ? 'Body/Paragraph/mdRegular' : 'Label/xsRegular'
+                }
+              >
+                <span className={styles.label}>{label}</span>
+              </Typography>
+              {!isPlaceholder && selectedText}
+            </>
+          )}
+        </SelectValue>
+
+        <MaterialIcon
+          icon="chevron_right"
+          size={24}
+          color={iconColor}
+          aria-hidden="true"
+          className={styles.chevron}
+        />
+      </Button>
+      <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>
+          ))}
+        </ListBox>
+      </Popover>
+    </AriaSelect>
+  )
+}
diff --git a/packages/design-system/lib/components/Select/SelectItem.tsx b/packages/design-system/lib/components/Select/SelectItem.tsx
new file mode 100644
index 000000000..2e8efbc81
--- /dev/null
+++ b/packages/design-system/lib/components/Select/SelectItem.tsx
@@ -0,0 +1,35 @@
+import { ListBoxItem } from 'react-aria-components'
+import { Typography } from '../Typography'
+import styles from './select.module.css'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { SelectItemProps } from './types'
+
+export function SelectItem({ children, icon, isDisabled }: SelectItemProps) {
+  return (
+    <ListBoxItem
+      className={styles.listBoxItem}
+      textValue={children}
+      isDisabled={isDisabled}
+    >
+      {({ isSelected }) => (
+        <>
+          {icon ? (
+            <MaterialIcon
+              icon={icon}
+              size={24}
+              color={isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'}
+              aria-hidden="true"
+            />
+          ) : null}
+          <Typography
+            variant={
+              isSelected ? 'Body/Paragraph/mdBold' : 'Body/Paragraph/mdRegular'
+            }
+          >
+            <span>{children}</span>
+          </Typography>
+        </>
+      )}
+    </ListBoxItem>
+  )
+}
diff --git a/packages/design-system/lib/components/Select/index.ts b/packages/design-system/lib/components/Select/index.ts
new file mode 100644
index 000000000..65e5c3fbf
--- /dev/null
+++ b/packages/design-system/lib/components/Select/index.ts
@@ -0,0 +1,2 @@
+export { Select } from './Select'
+export { SelectItem } from './SelectItem'
diff --git a/packages/design-system/lib/components/Select/select.module.css b/packages/design-system/lib/components/Select/select.module.css
new file mode 100644
index 000000000..35c839131
--- /dev/null
+++ b/packages/design-system/lib/components/Select/select.module.css
@@ -0,0 +1,96 @@
+.select {
+  position: relative;
+  max-width: 300px;
+
+  &[data-required] .label::after {
+    content: '*';
+  }
+  &[data-open] .chevron {
+    rotate: -90deg;
+  }
+  &[data-focused] {
+    .button {
+      border: 1px solid var(--Border-Interactive-Focus);
+      outline: none;
+    }
+    .selectValue {
+      color: var(--Text-Interactive-Focus);
+    }
+  }
+}
+
+.chevron {
+  rotate: 90deg;
+}
+
+.button {
+  background-color: var(--Surface-UI-Fill-Default);
+  border: 1px solid var(--Border-Default);
+  border-radius: var(--Corner-radius-md);
+  padding: var(--Space-x1);
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x1);
+  width: 100%;
+  height: 56px;
+
+  &[disabled] {
+    color: var(--Text-Interactive-Disabled);
+    background-color: var(--Surface-Primary-Disabled);
+
+    .label,
+    .selectValue {
+      color: var(--Text-Interactive-Disabled);
+    }
+  }
+}
+
+.selectValue {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--Space-x05) / 2);
+  align-items: flex-start;
+  flex: 1;
+  color: var(--Text-Default);
+}
+
+.label {
+  color: var(--Text-Interactive-Placeholder);
+}
+
+.popover {
+  background-color: var(--Surface-Primary-Default);
+  border-radius: var(--Corner-radius-md);
+  box-shadow: 0 0 14px 6px rgb(0 0 0 / 10%);
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+  overflow: auto;
+  padding: var(--Space-x2);
+  outline: none;
+  min-width: 280px;
+}
+
+.listBox {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+  outline: none;
+}
+
+.listBoxItem {
+  padding: var(--Space-x1) var(--Space-x1) var(--Space-x1) var(--Space-x15);
+  color: var(--Text-Default);
+  border-radius: var(--Corner-radius-md);
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x1);
+
+  &[data-focused] {
+    outline: none;
+  }
+  &[data-focused],
+  &[data-hovered] {
+    background-color: var(--Surface-Primary-Hover);
+  }
+}
diff --git a/packages/design-system/lib/components/Select/types.ts b/packages/design-system/lib/components/Select/types.ts
new file mode 100644
index 000000000..a92502315
--- /dev/null
+++ b/packages/design-system/lib/components/Select/types.ts
@@ -0,0 +1,25 @@
+import { ComponentProps } from 'react'
+import { Key, ListBoxItem, Select } from 'react-aria-components'
+import { MaterialIconProps } from '../Icons/MaterialIcon'
+
+interface Item extends Record<string, unknown> {
+  label: string
+  value: Key
+  isDisabled?: boolean
+  icon?: MaterialIconProps['icon']
+}
+
+export interface SelectProps extends ComponentProps<typeof Select> {
+  icon?: MaterialIconProps['icon']
+  itemIcon?: MaterialIconProps['icon']
+  items: (Key | Item)[]
+  name: string
+  label: string
+  isRequired?: boolean
+  isDisabled?: boolean
+}
+
+export interface SelectItemProps extends ComponentProps<typeof ListBoxItem> {
+  icon?: MaterialIconProps['icon']
+  children: string
+}

From bc7cec215cd0bc490ebc7b654fa6e40603f03522 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Tue, 8 Apr 2025 15:59:58 +0200
Subject: [PATCH 02/10] feat(SW-1509): enable filtering select

---
 .../lib/components/Select/Select.stories.tsx  |  26 ++++-
 .../lib/components/Select/Select.tsx          |  32 +++++-
 .../lib/components/Select/SelectFilter.tsx    | 104 ++++++++++++++++++
 .../lib/components/Select/index.ts            |   1 +
 .../lib/components/Select/select.module.css   |  74 +++++++++----
 .../lib/components/Select/types.ts            |   1 +
 6 files changed, 213 insertions(+), 25 deletions(-)
 create mode 100644 packages/design-system/lib/components/Select/SelectFilter.tsx

diff --git a/packages/design-system/lib/components/Select/Select.stories.tsx b/packages/design-system/lib/components/Select/Select.stories.tsx
index a04fb7e75..daf9e067a 100644
--- a/packages/design-system/lib/components/Select/Select.stories.tsx
+++ b/packages/design-system/lib/components/Select/Select.stories.tsx
@@ -19,8 +19,32 @@ export const Default: Story = {
     icon: 'star',
     itemIcon: 'check',
     items: ['Foo', 'Bar', 'Baz'],
-    // items: new Array(30).fill(null).map((_, idx) => idx),
     label: 'Select an item',
     name: 'foo',
   },
 }
+
+export const ObjectItem: Story = {
+  args: {
+    icon: 'star',
+    itemIcon: 'check',
+    items: [
+      { label: 'Foo', value: 'foo' },
+      { label: 'Bar', value: 'bar' },
+      { label: 'Baz', value: 'baz' },
+    ],
+    label: 'Select an item',
+    name: 'foo',
+  },
+}
+
+export const Filtering: Story = {
+  args: {
+    icon: 'star',
+    itemIcon: 'check',
+    items: ['Foo', 'Bar', 'Baz'],
+    label: 'Select an item',
+    name: 'foo',
+    enableFiltering: true,
+  },
+}
diff --git a/packages/design-system/lib/components/Select/Select.tsx b/packages/design-system/lib/components/Select/Select.tsx
index 343c07f54..299d542de 100644
--- a/packages/design-system/lib/components/Select/Select.tsx
+++ b/packages/design-system/lib/components/Select/Select.tsx
@@ -5,14 +5,17 @@ import {
   ListBox,
   Button,
 } from 'react-aria-components'
-import { Typography } from '../Typography'
+import { cx } from 'class-variance-authority'
 
-import styles from './select.module.css'
 import { MaterialIcon } from '../Icons/MaterialIcon'
+import { Typography } from '../Typography'
 import { SelectItem } from './SelectItem'
+import { SelectFilter } from './SelectFilter'
 
 import type { SelectProps } from './types'
 
+import styles from './select.module.css'
+
 export function Select({
   name,
   label,
@@ -21,7 +24,21 @@ export function Select({
   isDisabled,
   icon,
   itemIcon,
+  enableFiltering,
 }: SelectProps) {
+  if (enableFiltering) {
+    return (
+      <SelectFilter
+        name={name}
+        label={label}
+        items={items}
+        isRequired={isRequired}
+        isDisabled={isDisabled}
+        icon={icon}
+        itemIcon={itemIcon}
+      />
+    )
+  }
   const iconColor = isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'
 
   return (
@@ -32,7 +49,7 @@ export function Select({
       isRequired={isRequired}
       isDisabled={isDisabled}
     >
-      <Button className={styles.button}>
+      <Button className={cx(styles.inner, styles.button)}>
         {icon ? (
           <MaterialIcon
             icon={icon}
@@ -41,7 +58,7 @@ export function Select({
             aria-hidden="true"
           />
         ) : null}
-        <SelectValue className={styles.selectValue}>
+        <SelectValue className={cx(styles.displayText, styles.selectValue)}>
           {({ isPlaceholder, selectedText }) => (
             <>
               <Typography
@@ -51,7 +68,11 @@ export function Select({
               >
                 <span className={styles.label}>{label}</span>
               </Typography>
-              {!isPlaceholder && selectedText}
+              {selectedText ? (
+                <Typography variant="Body/Paragraph/mdRegular">
+                  <span>{selectedText}</span>
+                </Typography>
+              ) : null}
             </>
           )}
         </SelectValue>
@@ -64,6 +85,7 @@ export function Select({
           className={styles.chevron}
         />
       </Button>
+
       <Popover className={styles.popover} shouldFlip={false}>
         <ListBox className={styles.listBox}>
           {items.map((item, idx) => (
diff --git a/packages/design-system/lib/components/Select/SelectFilter.tsx b/packages/design-system/lib/components/Select/SelectFilter.tsx
new file mode 100644
index 000000000..33c9886f1
--- /dev/null
+++ b/packages/design-system/lib/components/Select/SelectFilter.tsx
@@ -0,0 +1,104 @@
+import {
+  Button,
+  ComboBox,
+  Input,
+  Key,
+  ListBox,
+  Popover,
+} from 'react-aria-components'
+import { cx } from 'class-variance-authority'
+import { useState } from 'react'
+
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { Typography } from '../Typography'
+import { SelectItem } from './SelectItem'
+
+import type { SelectProps } from './types'
+
+import styles from './select.module.css'
+
+export function SelectFilter({
+  name,
+  label,
+  items,
+  isRequired,
+  isDisabled,
+  icon,
+  itemIcon,
+}: SelectProps) {
+  const [focus, setFocus] = useState(false)
+  const [value, setValue] = useState<Key | null>(null)
+  const iconColor = isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'
+
+  return (
+    <ComboBox
+      className={styles.select}
+      name={name}
+      aria-label={label}
+      isRequired={isRequired}
+      isDisabled={isDisabled}
+      onSelectionChange={(val) => setValue(val)}
+      onFocus={() => setFocus(true)}
+      onBlur={() => setFocus(false)}
+    >
+      <label className={styles.inner}>
+        {icon ? (
+          <MaterialIcon
+            icon={icon}
+            size={24}
+            color={iconColor}
+            aria-hidden="true"
+          />
+        ) : null}
+
+        <span className={styles.displayText}>
+          <Typography
+            variant={
+              focus || value ? 'Label/xsRegular' : 'Body/Paragraph/mdRegular'
+            }
+          >
+            <span className={styles.label}>{label}</span>
+          </Typography>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <Input className={cx(styles.input, { [styles.hasValue]: value })} />
+          </Typography>
+        </span>
+        <Button className={styles.button}>
+          <MaterialIcon
+            icon="chevron_right"
+            size={24}
+            color={iconColor}
+            aria-hidden="true"
+            className={styles.chevron}
+          />
+        </Button>
+      </label>
+
+      <Popover
+        className={styles.popover}
+        shouldFlip={false}
+        crossOffset={icon ? -40 : -8}
+        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>
+          ))}
+        </ListBox>
+      </Popover>
+    </ComboBox>
+  )
+}
diff --git a/packages/design-system/lib/components/Select/index.ts b/packages/design-system/lib/components/Select/index.ts
index 65e5c3fbf..20fbbe724 100644
--- a/packages/design-system/lib/components/Select/index.ts
+++ b/packages/design-system/lib/components/Select/index.ts
@@ -1,2 +1,3 @@
 export { Select } from './Select'
 export { SelectItem } from './SelectItem'
+export { SelectFilter } from './SelectFilter'
diff --git a/packages/design-system/lib/components/Select/select.module.css b/packages/design-system/lib/components/Select/select.module.css
index 35c839131..a4eefbebf 100644
--- a/packages/design-system/lib/components/Select/select.module.css
+++ b/packages/design-system/lib/components/Select/select.module.css
@@ -1,5 +1,8 @@
 .select {
   position: relative;
+  background-color: var(--Surface-UI-Fill-Default);
+  border: 1px solid var(--Border-Default);
+  border-radius: var(--Corner-radius-md);
   max-width: 300px;
 
   &[data-required] .label::after {
@@ -9,48 +12,81 @@
     rotate: -90deg;
   }
   &[data-focused] {
-    .button {
-      border: 1px solid var(--Border-Interactive-Focus);
+    border: 1px solid var(--Border-Interactive-Focus);
+
+    .button,
+    .input {
       outline: none;
     }
-    .selectValue {
+    .input {
+      position: unset;
+    }
+    .label {
       color: var(--Text-Interactive-Focus);
     }
   }
+  &[data-disabled] {
+    .inner {
+      background-color: var(--Surface-Primary-Disabled);
+      color: var(--Text-Interactive-Disabled);
+    }
+    .button,
+    .input,
+    .label,
+    .selectValue {
+      color: var(--Text-Interactive-Disabled);
+    }
+  }
 }
 
 .chevron {
   rotate: 90deg;
 }
 
-.button {
-  background-color: var(--Surface-UI-Fill-Default);
-  border: 1px solid var(--Border-Default);
-  border-radius: var(--Corner-radius-md);
-  padding: var(--Space-x1);
+.inner {
   display: flex;
   align-items: center;
   gap: var(--Space-x1);
   width: 100%;
   height: 56px;
+  padding: var(--Space-x1);
+  box-sizing: border-box;
 
-  &[disabled] {
-    color: var(--Text-Interactive-Disabled);
-    background-color: var(--Surface-Primary-Disabled);
+  .button {
+    padding: 0;
+  }
+}
 
-    .label,
-    .selectValue {
-      color: var(--Text-Interactive-Disabled);
-    }
+.button,
+.input {
+  background: none;
+  border: 0;
+}
+
+.input {
+  position: absolute;
+  padding: 0;
+
+  &.hasValue {
+    position: unset;
+  }
+}
+
+.displayText {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--Space-x05) / 2);
+  flex: 1;
+  justify-content: center;
+  height: 100%;
+
+  &:has(.input) {
+    cursor: text;
   }
 }
 
 .selectValue {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--Space-x05) / 2);
   align-items: flex-start;
-  flex: 1;
   color: var(--Text-Default);
 }
 
diff --git a/packages/design-system/lib/components/Select/types.ts b/packages/design-system/lib/components/Select/types.ts
index a92502315..9eeabfa22 100644
--- a/packages/design-system/lib/components/Select/types.ts
+++ b/packages/design-system/lib/components/Select/types.ts
@@ -17,6 +17,7 @@ export interface SelectProps extends ComponentProps<typeof Select> {
   label: string
   isRequired?: boolean
   isDisabled?: boolean
+  enableFiltering?: boolean
 }
 
 export interface SelectItemProps extends ComponentProps<typeof ListBoxItem> {

From bacd57a735de5787eb8ea5e0a1a1aabb4b6fa20c Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Wed, 9 Apr 2025 11:51:37 +0200
Subject: [PATCH 03/10] fix(SW-1509): new select filter props interface

---
 .../design-system/lib/components/Select/SelectFilter.tsx     | 4 ++--
 packages/design-system/lib/components/Select/types.ts        | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/lib/components/Select/SelectFilter.tsx b/packages/design-system/lib/components/Select/SelectFilter.tsx
index 33c9886f1..ec65f91c3 100644
--- a/packages/design-system/lib/components/Select/SelectFilter.tsx
+++ b/packages/design-system/lib/components/Select/SelectFilter.tsx
@@ -13,7 +13,7 @@ import { MaterialIcon } from '../Icons/MaterialIcon'
 import { Typography } from '../Typography'
 import { SelectItem } from './SelectItem'
 
-import type { SelectProps } from './types'
+import type { SelectFilterProps } from './types'
 
 import styles from './select.module.css'
 
@@ -25,7 +25,7 @@ export function SelectFilter({
   isDisabled,
   icon,
   itemIcon,
-}: SelectProps) {
+}: SelectFilterProps) {
   const [focus, setFocus] = useState(false)
   const [value, setValue] = useState<Key | null>(null)
   const iconColor = isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'
diff --git a/packages/design-system/lib/components/Select/types.ts b/packages/design-system/lib/components/Select/types.ts
index 9eeabfa22..78708943d 100644
--- a/packages/design-system/lib/components/Select/types.ts
+++ b/packages/design-system/lib/components/Select/types.ts
@@ -24,3 +24,8 @@ export interface SelectItemProps extends ComponentProps<typeof ListBoxItem> {
   icon?: MaterialIconProps['icon']
   children: string
 }
+
+// Disabling rule because we're just omitting one prop while keeping interface
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface SelectFilterProps
+  extends Omit<SelectProps, 'enableFiltering'> {}

From 158c2501a5eb7e90e1c80776b41289b20f5f6cb1 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Wed, 9 Apr 2025 13:27:45 +0200
Subject: [PATCH 04/10] feat(SW-1509): add select to exports

---
 packages/design-system/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 051a1bcb5..1aad0512e 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -9,6 +9,7 @@
     "./ChipButton": "./dist/components/ChipButton/index.js",
     "./ChipLink": "./dist/components/ChipLink/index.js",
     "./Chips": "./dist/components/Chips/index.js",
+    "./Select": "./dist/components/Select/index.js",
     "./Typography": "./dist/components/Typography/index.js",
     "./RegularRateCard": "./dist/components/RateCard/Regular/index.js",
     "./CampaignRateCard": "./dist/components/RateCard/Campaign/index.js",

From 9ef292709b81eebedb34e1f318683c3b916b4434 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Wed, 9 Apr 2025 17:33:44 +0200
Subject: [PATCH 05/10] feat(SW-1509): enable support for more react aria props

fix invalid border

corrected default border
---
 .../design-system/lib/components/Select/Select.tsx    |  8 ++++----
 .../lib/components/Select/select.module.css           | 11 +++++++----
 packages/design-system/lib/components/Select/types.ts |  2 --
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/design-system/lib/components/Select/Select.tsx b/packages/design-system/lib/components/Select/Select.tsx
index 299d542de..9a3d67998 100644
--- a/packages/design-system/lib/components/Select/Select.tsx
+++ b/packages/design-system/lib/components/Select/Select.tsx
@@ -20,11 +20,11 @@ export function Select({
   name,
   label,
   items,
-  isRequired,
   isDisabled,
   icon,
   itemIcon,
   enableFiltering,
+  ...props
 }: SelectProps) {
   if (enableFiltering) {
     return (
@@ -32,10 +32,10 @@ export function Select({
         name={name}
         label={label}
         items={items}
-        isRequired={isRequired}
-        isDisabled={isDisabled}
         icon={icon}
         itemIcon={itemIcon}
+        isDisabled={isDisabled}
+        {...props}
       />
     )
   }
@@ -46,8 +46,8 @@ export function Select({
       className={styles.select}
       name={name}
       aria-label={label}
-      isRequired={isRequired}
       isDisabled={isDisabled}
+      {...props}
     >
       <Button className={cx(styles.inner, styles.button)}>
         {icon ? (
diff --git a/packages/design-system/lib/components/Select/select.module.css b/packages/design-system/lib/components/Select/select.module.css
index a4eefbebf..842953373 100644
--- a/packages/design-system/lib/components/Select/select.module.css
+++ b/packages/design-system/lib/components/Select/select.module.css
@@ -1,18 +1,18 @@
 .select {
   position: relative;
   background-color: var(--Surface-UI-Fill-Default);
-  border: 1px solid var(--Border-Default);
+  border: 1px solid var(--Border-Interactive-Default);
   border-radius: var(--Corner-radius-md);
   max-width: 300px;
 
   &[data-required] .label::after {
-    content: '*';
+    content: ' *';
   }
   &[data-open] .chevron {
     rotate: -90deg;
   }
   &[data-focused] {
-    border: 1px solid var(--Border-Interactive-Focus);
+    border-color: var(--Border-Interactive-Focus);
 
     .button,
     .input {
@@ -37,6 +37,9 @@
       color: var(--Text-Interactive-Disabled);
     }
   }
+  &[data-invalid] {
+    border-color: var(--Border-Interactive-Error);
+  }
 }
 
 .chevron {
@@ -49,7 +52,7 @@
   gap: var(--Space-x1);
   width: 100%;
   height: 56px;
-  padding: var(--Space-x1);
+  padding: var(--Space-x15);
   box-sizing: border-box;
 
   .button {
diff --git a/packages/design-system/lib/components/Select/types.ts b/packages/design-system/lib/components/Select/types.ts
index 78708943d..29ded498a 100644
--- a/packages/design-system/lib/components/Select/types.ts
+++ b/packages/design-system/lib/components/Select/types.ts
@@ -15,8 +15,6 @@ export interface SelectProps extends ComponentProps<typeof Select> {
   items: (Key | Item)[]
   name: string
   label: string
-  isRequired?: boolean
-  isDisabled?: boolean
   enableFiltering?: boolean
 }
 

From cb344c7bcf49555f101cf2e8593feca5cacd9e9c Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Thu, 10 Apr 2025 10:32:25 +0200
Subject: [PATCH 06/10] fix(SW-1509): additional stories

---
 .../lib/components/Select/Select.stories.tsx       | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/design-system/lib/components/Select/Select.stories.tsx b/packages/design-system/lib/components/Select/Select.stories.tsx
index daf9e067a..5c467e65a 100644
--- a/packages/design-system/lib/components/Select/Select.stories.tsx
+++ b/packages/design-system/lib/components/Select/Select.stories.tsx
@@ -16,8 +16,6 @@ type Story = StoryObj<typeof Select>
 
 export const Default: Story = {
   args: {
-    icon: 'star',
-    itemIcon: 'check',
     items: ['Foo', 'Bar', 'Baz'],
     label: 'Select an item',
     name: 'foo',
@@ -26,8 +24,6 @@ export const Default: Story = {
 
 export const ObjectItem: Story = {
   args: {
-    icon: 'star',
-    itemIcon: 'check',
     items: [
       { label: 'Foo', value: 'foo' },
       { label: 'Bar', value: 'bar' },
@@ -38,13 +34,21 @@ export const ObjectItem: Story = {
   },
 }
 
-export const Filtering: Story = {
+export const Icons: Story = {
   args: {
     icon: 'star',
     itemIcon: 'check',
     items: ['Foo', 'Bar', 'Baz'],
     label: 'Select an item',
     name: 'foo',
+  },
+}
+
+export const Filtering: Story = {
+  args: {
+    items: ['Foo', 'Bar', 'Baz'],
+    label: 'Select an item',
+    name: 'foo',
     enableFiltering: true,
   },
 }

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 07/10] 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}

From a93ed00ee5d4d32d866a5b028f454b88d19cbf02 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Thu, 10 Apr 2025 14:37:52 +0200
Subject: [PATCH 08/10] fix(SW-1509): removed support for plain array items in
 order to handle proper props extending

various fixes for supporting default selected
---
 .../lib/components/Select/Select.stories.tsx  | 42 ++++++-----
 .../lib/components/Select/Select.tsx          | 73 ++++++++-----------
 .../lib/components/Select/SelectFilter.tsx    | 44 +++++------
 .../lib/components/Select/select.module.css   |  2 +-
 .../lib/components/Select/types.ts            | 17 +++--
 5 files changed, 83 insertions(+), 95 deletions(-)

diff --git a/packages/design-system/lib/components/Select/Select.stories.tsx b/packages/design-system/lib/components/Select/Select.stories.tsx
index 5f42f9dcc..6ac4240e9 100644
--- a/packages/design-system/lib/components/Select/Select.stories.tsx
+++ b/packages/design-system/lib/components/Select/Select.stories.tsx
@@ -14,9 +14,15 @@ export default meta
 
 type Story = StoryObj<typeof Select>
 
+const items = [
+  { label: 'Foo', value: 'foo' },
+  { label: 'Bar', value: 'bar' },
+  { label: 'Baz', value: 'baz' },
+]
+
 export const Default: Story = {
   args: {
-    items: ['Foo', 'Bar', 'Baz'],
+    items,
     label: 'Select an item',
     name: 'foo',
   },
@@ -24,40 +30,38 @@ 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: [
-      { label: 'Foo', value: 'foo' },
-      { label: 'Bar', value: 'bar' },
-      { label: 'Baz', value: 'baz' },
-    ],
+    items,
     label: 'Select an item',
     name: 'foo',
+    defaultSelectedKey: 'foo',
   },
 }
 
 export const Icons: Story = {
   args: {
-    icon: 'star',
-    itemIcon: 'check',
-    items: ['Foo', 'Bar', 'Baz'],
+    items,
     label: 'Select an item',
     name: 'foo',
+    icon: 'star',
+    itemIcon: 'check',
   },
 }
 
 export const Filtering: Story = {
   args: {
-    items: ['Foo', 'Bar', 'Baz'],
+    items,
     label: 'Select an item',
     name: 'foo',
     enableFiltering: true,
   },
 }
+
+export const FilteringSelected: Story = {
+  args: {
+    items,
+    label: 'Select an item',
+    name: 'foo',
+    enableFiltering: true,
+    defaultSelectedKey: 'foo',
+  },
+}
diff --git a/packages/design-system/lib/components/Select/Select.tsx b/packages/design-system/lib/components/Select/Select.tsx
index dd918c7c8..0682939b2 100644
--- a/packages/design-system/lib/components/Select/Select.tsx
+++ b/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>
diff --git a/packages/design-system/lib/components/Select/SelectFilter.tsx b/packages/design-system/lib/components/Select/SelectFilter.tsx
index 469ea4abb..e6541e530 100644
--- a/packages/design-system/lib/components/Select/SelectFilter.tsx
+++ b/packages/design-system/lib/components/Select/SelectFilter.tsx
@@ -6,7 +6,6 @@ import {
   ListBox,
   Popover,
 } from 'react-aria-components'
-import { cx } from 'class-variance-authority'
 import { useState } from 'react'
 
 import { MaterialIcon } from '../Icons/MaterialIcon'
@@ -21,13 +20,14 @@ export function SelectFilter({
   name,
   label,
   items,
-  isRequired,
   isDisabled,
   icon,
   itemIcon,
+  defaultSelectedKey,
+  ...props
 }: SelectFilterProps) {
   const [focus, setFocus] = useState(false)
-  const [value, setValue] = useState<Key | null>(null)
+  const [value, setValue] = useState<Key | null>(defaultSelectedKey ?? null)
   const iconColor = isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'
 
   return (
@@ -35,11 +35,12 @@ export function SelectFilter({
       className={styles.select}
       name={name}
       aria-label={label}
-      isRequired={isRequired}
       isDisabled={isDisabled}
-      onSelectionChange={(val) => setValue(val)}
+      onSelectionChange={setValue}
       onFocus={() => setFocus(true)}
       onBlur={() => setFocus(false)}
+      defaultSelectedKey={defaultSelectedKey}
+      {...props}
     >
       <label className={styles.inner}>
         {icon ? (
@@ -60,7 +61,7 @@ export function SelectFilter({
             <span className={styles.label}>{label}</span>
           </Typography>
           <Typography variant="Body/Paragraph/mdRegular">
-            <Input className={cx(styles.input, { [styles.hasValue]: value })} />
+            <Input className={styles.input} />
           </Typography>
         </span>
         <Button className={styles.button}>
@@ -81,27 +82,16 @@ export function SelectFilter({
         offset={22}
       >
         <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>
     </ComboBox>
diff --git a/packages/design-system/lib/components/Select/select.module.css b/packages/design-system/lib/components/Select/select.module.css
index 842953373..b4617ed13 100644
--- a/packages/design-system/lib/components/Select/select.module.css
+++ b/packages/design-system/lib/components/Select/select.module.css
@@ -70,7 +70,7 @@
   position: absolute;
   padding: 0;
 
-  &.hasValue {
+  &[value]:not([value='']) {
     position: unset;
   }
 }
diff --git a/packages/design-system/lib/components/Select/types.ts b/packages/design-system/lib/components/Select/types.ts
index 29ded498a..d31c64806 100644
--- a/packages/design-system/lib/components/Select/types.ts
+++ b/packages/design-system/lib/components/Select/types.ts
@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react'
-import { Key, ListBoxItem, Select } from 'react-aria-components'
+import { ComboBox, Key, ListBoxItem, Select } from 'react-aria-components'
 import { MaterialIconProps } from '../Icons/MaterialIcon'
 
 interface Item extends Record<string, unknown> {
@@ -12,10 +12,9 @@ interface Item extends Record<string, unknown> {
 export interface SelectProps extends ComponentProps<typeof Select> {
   icon?: MaterialIconProps['icon']
   itemIcon?: MaterialIconProps['icon']
-  items: (Key | Item)[]
+  items: Item[]
   name: string
   label: string
-  enableFiltering?: boolean
 }
 
 export interface SelectItemProps extends ComponentProps<typeof ListBoxItem> {
@@ -23,7 +22,11 @@ export interface SelectItemProps extends ComponentProps<typeof ListBoxItem> {
   children: string
 }
 
-// Disabling rule because we're just omitting one prop while keeping interface
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface SelectFilterProps
-  extends Omit<SelectProps, 'enableFiltering'> {}
+export interface SelectFilterProps extends ComponentProps<typeof ComboBox> {
+  icon?: MaterialIconProps['icon']
+  itemIcon?: MaterialIconProps['icon']
+  items: Item[]
+  name: string
+  label: string
+  enableFiltering: boolean
+}

From c39a18ab58eb8c8c297c6c1d54afbe613832ca55 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Fri, 11 Apr 2025 08:58:01 +0200
Subject: [PATCH 09/10] fix(SW-1509): fix typing for supporting on selection
 change prop to be aligned between the two versions

---
 .../design-system/lib/components/Select/SelectFilter.tsx  | 8 +++++++-
 packages/design-system/lib/components/Select/types.ts     | 2 ++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/lib/components/Select/SelectFilter.tsx b/packages/design-system/lib/components/Select/SelectFilter.tsx
index e6541e530..42a6e5514 100644
--- a/packages/design-system/lib/components/Select/SelectFilter.tsx
+++ b/packages/design-system/lib/components/Select/SelectFilter.tsx
@@ -24,6 +24,7 @@ export function SelectFilter({
   icon,
   itemIcon,
   defaultSelectedKey,
+  onSelectionChange,
   ...props
 }: SelectFilterProps) {
   const [focus, setFocus] = useState(false)
@@ -36,7 +37,12 @@ export function SelectFilter({
       name={name}
       aria-label={label}
       isDisabled={isDisabled}
-      onSelectionChange={setValue}
+      onSelectionChange={(val) => {
+        setValue(val)
+        if (onSelectionChange) {
+          onSelectionChange(val)
+        }
+      }}
       onFocus={() => setFocus(true)}
       onBlur={() => setFocus(false)}
       defaultSelectedKey={defaultSelectedKey}
diff --git a/packages/design-system/lib/components/Select/types.ts b/packages/design-system/lib/components/Select/types.ts
index d31c64806..49a40ff8e 100644
--- a/packages/design-system/lib/components/Select/types.ts
+++ b/packages/design-system/lib/components/Select/types.ts
@@ -15,6 +15,7 @@ export interface SelectProps extends ComponentProps<typeof Select> {
   items: Item[]
   name: string
   label: string
+  onSelectionChange?: (key: Key | null) => void
 }
 
 export interface SelectItemProps extends ComponentProps<typeof ListBoxItem> {
@@ -28,5 +29,6 @@ export interface SelectFilterProps extends ComponentProps<typeof ComboBox> {
   items: Item[]
   name: string
   label: string
+  onSelectionChange?: (key: Key | null) => void
   enableFiltering: boolean
 }

From 515885ecbf84c4ff660e3dd3bc7c332b5eb6ee67 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Fri, 11 Apr 2025 09:24:45 +0200
Subject: [PATCH 10/10] fix(SW-1509): remove default max width

---
 packages/design-system/lib/components/Select/select.module.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/design-system/lib/components/Select/select.module.css b/packages/design-system/lib/components/Select/select.module.css
index b4617ed13..c56960e97 100644
--- a/packages/design-system/lib/components/Select/select.module.css
+++ b/packages/design-system/lib/components/Select/select.module.css
@@ -3,7 +3,6 @@
   background-color: var(--Surface-UI-Fill-Default);
   border: 1px solid var(--Border-Interactive-Default);
   border-radius: var(--Corner-radius-md);
-  max-width: 300px;
 
   &[data-required] .label::after {
     content: ' *';