feat: wheel behaviour on choiceselect

src/components/ChoiceSelect/ChoiceSelect.tsx

@@ -23,8 +23,22 @@ function ChoiceSelect<T extends string>({
   className = '',
   style,
 }: ChoiceSelectProps<T>) {
+  const step = (direction: 1 | -1) => {
+    const currentIndex = options.indexOf(value);
+
+    if (currentIndex === -1 || options.length === 0) return;
+
+    const nextIndex =
+      (currentIndex + direction + options.length) % options.length;
+
+    onChange(options[nextIndex]);
+  };
+
   return (
-    <div className={`choice-select ${className}`} data-disabled={disabled || undefined}>
+    <div
+      className={`choice-select ${className}`}
+      data-disabled={disabled || undefined}
+    >
       <select
         id={id}
         className="choice-select__input"
@@ -35,6 +49,17 @@ function ChoiceSelect<T extends string>({
           onChange(e.target.value as T);
           e.currentTarget.blur();
         }}
+        onWheel={(e) => {
+          e.preventDefault();
+
+          if (disabled) return;
+
+          if (e.deltaY < 0) {
+            step(1);
+          } else if (e.deltaY > 0) {
+            step(-1);
+          }
+        }}
       >
         {options.map((option) => (
           <option key={option} value={option}>