feat: remove state and let rust handle

src/components/ChoiceSelect/ChoiceSelect.tsx

@@ -9,6 +9,8 @@ type ChoiceSelectProps<T extends string> = {
   onChange: (value: T) => void;
   id?: string;
   disabled?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
 };
 
 function ChoiceSelect<T extends string>({
@@ -18,15 +20,21 @@ function ChoiceSelect<T extends string>({
   onChange,
   id,
   disabled,
+  className = '',
+  style,
 }: ChoiceSelectProps<T>) {
   return (
-    <div className="choice-select" data-disabled={disabled || undefined}>
+    <div className={`choice-select ${className}`} data-disabled={disabled || undefined}>
       <select
         id={id}
         className="choice-select__input"
+        style={style}
         value={value}
         disabled={disabled}
-        onChange={(e) => onChange(e.target.value as T)}
+        onChange={(e) => {
+          onChange(e.target.value as T);
+          e.currentTarget.blur();
+        }}
       >
         {options.map((option) => (
           <option key={option} value={option}>
@@ -34,6 +42,7 @@ function ChoiceSelect<T extends string>({
           </option>
         ))}
       </select>
+
       <span className="choice-select__chevron" aria-hidden="true">
         <TriangleDownIcon />
       </span>

src/components/ChoiceStepper/ChoiceStepper.tsx

@@ -67,9 +67,15 @@ function ChoiceStepperList<T>({
   useEffect(() => setText(formatLabel(value)), [value, formatLabel]);
 
   const step = (direction: 1 | -1) => {
-    const currentIndex = index === -1 ? 0 : index;
-    const nextIndex = Math.min(values.length - 1, Math.max(0, currentIndex + direction));
-    if (nextIndex !== currentIndex) onChange(values[nextIndex]);
+    const currentIndex = values.indexOf(value);
+
+    if (currentIndex === -1) return;
+
+    const nextIndex = currentIndex + direction;
+
+    if (nextIndex >= 0 && nextIndex < values.length) {
+      onChange(values[nextIndex]);
+    }
   };
 
   const commitText = () => {
@@ -89,6 +95,15 @@ function ChoiceStepperList<T>({
         disabled={disabled}
         onChange={(e) => setText(e.target.value)}
         onBlur={commitText}
+        onWheel={(e) => {
+          e.preventDefault();
+
+          if (e.deltaY < 0 && canUp) {
+            step(1);
+          } else if (e.deltaY > 0 && canDown) {
+            step(-1);
+          }
+        }}
         onKeyDown={(e) => {
           if (e.key === 'Enter') e.currentTarget.blur();
           else if (e.key === 'ArrowUp') {
@@ -164,14 +179,24 @@ function ChoiceStepperRange({
         disabled={disabled}
         onChange={(e) => setText(e.target.value)}
         onBlur={commitText}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') e.currentTarget.blur();
-          else if (e.key === 'ArrowUp') {
-            e.preventDefault();
+        onWheel={(e) => {
+          e.preventDefault();
+
+          if (e.deltaY < 0 && canUp) {
             step(1);
+          } else if (e.deltaY > 0 && canDown) {
+            step(-1);
+          }
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.currentTarget.blur();
+          } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            if (canUp) step(1);
           } else if (e.key === 'ArrowDown') {
             e.preventDefault();
-            step(-1);
+            if (canDown) step(-1);
           }
         }}
       />

src/components/SignalFlowMatrix/SignalFlowMatrix.tsx

@@ -351,4 +351,4 @@ function SignalFlowMatrix({
   );
 }
 
-export default SignalFlowMatrix;
+export default SignalFlowMatrix;