feat(SW-1509): new select component in design-system

2025-04-08 12:54:48 +02:00
parent eb46f08ef1
commit 77e4e9d203
6 changed files with 273 additions and 0 deletions
--- a/packages/design-system/lib/components/Select/Select.tsx
+++ 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>
+  )
+}