refactor: migrate related components

apps/client/src/common/components/select/Select.module.scss

@@ -17,11 +17,11 @@
   font-size: calc(1rem - 2px);
   white-space: nowrap;
 
-  &:hover:not(:disabled) {
+  &:hover:not([data-disabled]) {
     background-color: $gray-1100;
   }
 
-  &:active {
+  &:active:not([data-disabled]) {
     background-color: $gray-1000;
   }
 
@@ -29,7 +29,7 @@
     background-color: $gray-1000;
   }
 
-  &:disabled {
+  &[data-disabled] {
     opacity: 0.4;
     cursor: not-allowed;
   }

apps/client/src/common/components/select/Select.tsx

@@ -4,25 +4,17 @@ import { Select as BaseSelect } from '@base-ui-components/react/select';
 
 import styles from './Select.module.scss';
 
-interface SelectProps<T extends string | null = string> {
-  defaultValue?: T;
+interface SelectProps<T> extends Omit<BaseSelect.Root.Props<T>, 'items'> {
+  // overload items to not allow undefined values
   options: {
-    value: NonNullable<T>;
+    value: T;
     label: string;
-    disabled?: boolean; // exposed to allow creating a non-selectable option
   }[];
-  value?: T;
-  onChange?: (value: NonNullable<T>) => void;
 }
 
-export default function Select<T extends string | null = string>({
-  defaultValue,
-  options,
-  value,
-  onChange,
-}: SelectProps<T>) {
+export default function Select<T>({ options, ...selectRootProps }: SelectProps<T>) {
   return (
-    <BaseSelect.Root items={options} defaultValue={defaultValue} onValueChange={onChange} value={value}>
+    <BaseSelect.Root items={options} {...selectRootProps}>
       <BaseSelect.Trigger className={styles.select}>
         <BaseSelect.Value />
         <BaseSelect.Icon className={styles.selectIcon}>
@@ -33,16 +25,14 @@ export default function Select<T extends string | null = string>({
         <BaseSelect.Positioner side='bottom' align='start'>
           <BaseSelect.ScrollUpArrow className={styles.scrollArrow} />
           <BaseSelect.Popup className={styles.popup}>
-            {options.map((option) => {
-              return (
-                <BaseSelect.Item key={option.value} className={styles.item} value={option.value}>
-                  <BaseSelect.ItemIndicator className={styles.itemIndicator}>
-                    <IoCheckmark className={styles.itemIndicatorIcon} />
-                  </BaseSelect.ItemIndicator>
-                  <BaseSelect.ItemText className={styles.itemLabel}>{option.label}</BaseSelect.ItemText>
-                </BaseSelect.Item>
-              );
-            })}
+            {options.map(({ label, value }) => (
+              <BaseSelect.Item key={String(value)} className={styles.item} value={value}>
+                <BaseSelect.ItemIndicator className={styles.itemIndicator}>
+                  <IoCheckmark className={styles.itemIndicatorIcon} />
+                </BaseSelect.ItemIndicator>
+                <BaseSelect.ItemText className={styles.itemLabel}>{label}</BaseSelect.ItemText>
+              </BaseSelect.Item>
+            ))}
           </BaseSelect.Popup>
           <BaseSelect.ScrollDownArrow className={styles.scrollArrow} />
         </BaseSelect.Positioner>