Dropdown Sounds Reimplemented [AARD-2065] (#1282)

Author: PepperLola

fission/src/assets/sound-files/DullClick.wav

@@ -9,6 +9,14 @@ import {
     ToggleButtonGroup as MuiToggleButtonGroup,
     Stack,
     type ToggleButtonGroupProps,
+    Select as MuiSelect,
+    type SelectProps,
+    Accordion as MuiAccordion,
+    type AccordionProps,
+    AccordionSummary as MuiAccordionSummary,
+    type AccordionSummaryProps,
+    AccordionDetails as MuiAccordionDetails,
+    type AccordionDetailsProps,
     type ToggleButtonProps,
     Tooltip,
 } from "@mui/material"
@@ -130,6 +138,30 @@ export const ToggleButtonGroup: React.FC<ToggleButtonGroupProps> = ({ children,
     )
 }
 
+export const Select: React.FC<SelectProps> = ({ children, ...props }) => {
+    return (
+        <MuiSelect {...SoundPlayer.getInstance().dropdownSoundEffects()} {...props}>
+            {children}
+        </MuiSelect>
+    )
+}
+
+export const Accordion: React.FC<AccordionProps> = ({ children, ...props }) => {
+    return <MuiAccordion {...props}>{children}</MuiAccordion>
+}
+
+export const AccordionSummary: React.FC<AccordionSummaryProps> = ({ children, ...props }) => {
+    return (
+        <MuiAccordionSummary {...SoundPlayer.getInstance().dropdownSoundEffects()} {...props}>
+            {children}
+        </MuiAccordionSummary>
+    )
+}
+
+export const AccordionDetails: React.FC<AccordionDetailsProps> = ({ children, ...props }) => {
+    return <MuiAccordionDetails {...props}>{children}</MuiAccordionDetails>
+}
+
 export const PositiveButton: React.FC<ButtonProps> = ({ children, onClick, ...props }) => {
     return (
         <Button onClick={onClick} {...props} color="success">
@@ -257,4 +289,4 @@ export const LabelWithTooltip = (labelText: string, tooltipText: string) => {
 }
 
 // Export the raw MUI components for cases where sound effects are not wanted
-export { MuiButton, MuiIconButton, MuiToggleButton, MuiToggleButtonGroup }
+export { MuiButton, MuiIconButton, MuiToggleButton, MuiToggleButtonGroup, MuiSelect }

fission/src/ui/components/StyledComponents.tsx

@@ -1,4 +1,5 @@
-import { FormControl, InputLabel, MenuItem, Select } from "@mui/material"
+import { FormControl, InputLabel, MenuItem } from "@mui/material"
+import { Select } from "@/ui/components/StyledComponents"
 import type React from "react"
 import { useEffect, useState } from "react"
 import type { ModalImplProps } from "../components/Modal"

fission/src/ui/modals/ViewModal.tsx

@@ -1,4 +1,5 @@
-import { FormControl, InputLabel, MenuItem, Select, TextField } from "@mui/material"
+import { FormControl, InputLabel, MenuItem, TextField } from "@mui/material"
+import { Select } from "@/ui/components/StyledComponents"
 import { Stack } from "@mui/system"
 import type React from "react"
 import { useEffect, useMemo, useState } from "react"

fission/src/ui/modals/configuring/inputs/NewInputSchemeModal.tsx

@@ -1,4 +1,5 @@
-import { FormControl, InputLabel, MenuItem, Select, TextField } from "@mui/material"
+import { FormControl, InputLabel, MenuItem, TextField } from "@mui/material"
+import { Select } from "@/ui/components/StyledComponents"
 import type React from "react"
 import { useEffect, useState } from "react"
 import EncoderStimulus from "@/systems/simulation/stimulus/EncoderStimulus"

fission/src/ui/modals/configuring/rio-config/RCConfigEncoderModal.tsx

@@ -1,4 +1,5 @@
-import { FormControl, InputLabel, MenuItem, Select } from "@mui/material"
+import { FormControl, InputLabel, MenuItem } from "@mui/material"
+import { Select } from "@/ui/components/StyledComponents"
 import type React from "react"
 import { useEffect, useState } from "react"
 import WPILibBrain from "@/systems/simulation/wpilib_brain/WPILibBrain"

fission/src/ui/modals/configuring/rio-config/RCCreateDeviceModal.tsx

@@ -1,4 +1,5 @@
-import { FormControl, InputLabel, MenuItem, Select } from "@mui/material"
+import { FormControl, InputLabel, MenuItem } from "@mui/material"
+import { Select } from "@/ui/components/StyledComponents"
 import type MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
 import { DriveType } from "@/systems/simulation/behavior/Behavior.ts"
 import type SynthesisBrain from "@/systems/simulation/synthesis_brain/SynthesisBrain"

fission/src/ui/panels/configuring/assembly-config/interfaces/DrivetrainSelectionInterface.tsx

@@ -1,4 +1,4 @@
-import { Box, Divider, MenuItem, Select, Stack } from "@mui/material"
+import { Box, Divider, MenuItem, Stack } from "@mui/material"
 import type React from "react"
 import { useEffect, useState } from "react"
 import InputSystem from "@/systems/input/InputSystem"
@@ -9,7 +9,7 @@ import type Input from "@/systems/input/inputs/Input"
 import type { KeyCode } from "@/systems/input/KeyboardTypes"
 import Checkbox from "@/ui/components/Checkbox"
 import Label from "@/ui/components/Label"
-import { Button, SynthesisIcons } from "@/ui/components/StyledComponents"
+import { Button, SynthesisIcons, Select } from "@/ui/components/StyledComponents"
 
 // Converts camelCase to Title Case for the inputs modal
 const toTitleCase = (camelCase: string) => {
@@ -209,7 +209,7 @@ const EditInputInterface: React.FC<EditInputProps> = ({ input, useGamepad, useTo
                     value={gamepadAxes[input.gamepadAxisNumber + 1]}
                     onChange={e => {
                         setSelectedInput(input.inputName)
-                        setChosenGamepadAxis(gamepadAxes.indexOf(e.target.value))
+                        setChosenGamepadAxis(gamepadAxes.indexOf(e.target.value as string))
                     }}
                 >
                     {gamepadAxes.map(axis => (
@@ -277,7 +277,7 @@ const EditInputInterface: React.FC<EditInputProps> = ({ input, useGamepad, useTo
                     value={touchControlsAxes[input.touchControlAxis]}
                     onChange={e => {
                         setSelectedInput(input.inputName)
-                        setChosenTouchControlsAxis(touchControlsAxes.indexOf(e.target.value))
+                        setChosenTouchControlsAxis(touchControlsAxes.indexOf(e.target.value as string))
                     }}
                 >
                     {touchControlsAxes.map(axis => (

fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/EditInputInterface.tsx

@@ -7,10 +7,10 @@ import {
     ListItemText,
     MenuItem,
     OutlinedInput,
-    Select,
     Stack,
     TextField,
 } from "@mui/material"
+import { Select } from "@/ui/components/StyledComponents"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import * as THREE from "three"
 import { ConfigurationSavedEvent } from "@/events/ConfigurationSavedEvent"
@@ -308,7 +308,7 @@ const ZoneConfigInterface: React.FC<ZoneConfigProps> = ({ selectedField, selecte
                     }}
                     value={activeDuring}
                     input={<OutlinedInput label="Contact Type" />}
-                    renderValue={selected => selected.join(", ")}
+                    renderValue={selected => (selected as MatchModeType[]).join(", ")}
                     multiple
                 >
                     {MATCH_MODE_OPTIONS.map(opt => (

fission/src/ui/panels/configuring/assembly-config/interfaces/scoring/ProtectedZoneConfigInterface.tsx

@@ -1,4 +1,4 @@
-import { Box, Divider, FormControl, InputLabel, MenuItem, Select, Stack, Tooltip } from "@mui/material"
+import { Box, Divider, FormControl, InputLabel, MenuItem, Stack, Tooltip } from "@mui/material"
 import { type ReactElement, useCallback, useEffect, useReducer, useState } from "react"
 import InputSchemeManager from "@/systems/input/InputSchemeManager"
 import InputSystem from "@/systems/input/InputSystem"
@@ -7,7 +7,14 @@ import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 import { DriveType } from "@/systems/simulation/behavior/Behavior"
 import SynthesisBrain from "@/systems/simulation/synthesis_brain/SynthesisBrain"
 import Label from "@/ui/components/Label"
-import { Button, DeleteButton, EditButton, PositiveButton, SynthesisIcons } from "@/ui/components/StyledComponents"
+import {
+    Button,
+    DeleteButton,
+    EditButton,
+    PositiveButton,
+    SynthesisIcons,
+    Select,
+} from "@/ui/components/StyledComponents"
 import { TouchControlsEvent, TouchControlsEventKeys } from "@/ui/components/TouchControls"
 import { useStateContext } from "@/ui/helpers/StateProviderHelpers"