ref(ts): Remove some inferred types from selectControl (#57486)

static/app/components/forms/controls/selectControl.tsx

@@ -19,10 +19,10 @@ import omit from 'lodash/omit';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {IconChevron, IconClose} from 'sentry/icons';
 import {space} from 'sentry/styles/space';
-import {Choices, SelectValue} from 'sentry/types';
+import type {Choices, SelectValue} from 'sentry/types';
 import convertFromSelect2Choices from 'sentry/utils/convertFromSelect2Choices';
 import PanelProvider from 'sentry/utils/panelProvider';
-import {FormSize} from 'sentry/utils/theme';
+import type {FormSize} from 'sentry/utils/theme';
 
 import Option from './selectOption';
 
@@ -175,7 +175,7 @@ function SelectControl<OptionType extends GeneralSelectValue = GeneralSelectValu
   // Unfortunately we cannot use emotions `css` helper here, since react-select
   // *requires* object styles, which the css helper cannot produce.
   const indicatorStyles = useCallback(
-    ({padding: _padding, ...provided}: CSSObject) => ({
+    (provided: CSSObject): CSSObject => ({
       ...provided,
       padding: '4px',
       alignItems: 'center',
@@ -189,12 +189,10 @@ function SelectControl<OptionType extends GeneralSelectValue = GeneralSelectValu
     () => ({
       control: (_, state: any) => ({
         display: 'flex',
-        ...{
-          color: theme.formText,
-          background: theme.background,
-          border: `1px solid ${theme.border}`,
-          boxShadow: theme.dropShadowMedium,
-        },
+        color: theme.formText,
+        background: theme.background,
+        border: `1px solid ${theme.border}`,
+        boxShadow: theme.dropShadowMedium,
         borderRadius: theme.borderRadius,
         transition: 'border 0.1s, box-shadow 0.1s',
         alignItems: 'center',
@@ -354,7 +352,7 @@ function SelectControl<OptionType extends GeneralSelectValue = GeneralSelectValu
     [theme, size, maxMenuWidth, indicatorStyles]
   );
 
-  const getFieldLabelStyle = (label?: string) => ({
+  const getFieldLabelStyle = (label?: string): CSSObject => ({
     ':before': {
       content: `"${label}"`,
       color: theme.gray300,
@@ -408,7 +406,7 @@ function SelectControl<OptionType extends GeneralSelectValue = GeneralSelectValu
   }
 
   // Override the default style with in-field labels if they are provided
-  const inFieldLabelStyles = {
+  const inFieldLabelStyles: StylesConfig = {
     singleValue: (base: CSSObject) => ({
       ...base,
       ...getFieldLabelStyle(inFieldLabel),
@@ -418,14 +416,14 @@ function SelectControl<OptionType extends GeneralSelectValue = GeneralSelectValu
       ...getFieldLabelStyle(inFieldLabel),
     }),
   };
-  const labelOrDefaultStyles = inFieldLabel
+  const labelOrDefaultStyles: StylesConfig = inFieldLabel
     ? mergeStyles(defaultStyles, inFieldLabelStyles)
     : defaultStyles;
 
   // Allow the provided `styles` prop to override default styles using the same
   // function interface provided by react-styled. This ensures the `provided`
   // styles include our overridden default styles
-  const mappedStyles = styles
+  const mappedStyles: StylesConfig = styles
     ? mergeStyles(labelOrDefaultStyles, styles)
     : labelOrDefaultStyles;
 
@@ -438,6 +436,7 @@ function SelectControl<OptionType extends GeneralSelectValue = GeneralSelectValu
     IndicatorSeparator: null,
     Menu,
     Option,
+    ...components,
   };
 
   const filterOptions = createFilter({
@@ -449,7 +448,7 @@ function SelectControl<OptionType extends GeneralSelectValue = GeneralSelectValu
     <SelectPicker<OptionType>
       filterOption={filterOptions}
       styles={mappedStyles}
-      components={{...replacedComponents, ...components}}
+      components={replacedComponents}
       async={async}
       creatable={creatable}
       isClearable={clearable}