feat(SW-1509): enable filtering select

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) => (