remove UseState from legacy Select story (#53519)

.betterer.results

@@ -1432,12 +1432,7 @@ exports[`better eslint`] = {
     ],
     "packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
-      [0, 0, 0, "Do not use any type assertions.", "3"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "4"],
-      [0, 0, 0, "Do not use any type assertions.", "5"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "6"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
     "packages/grafana-ui/src/components/Forms/Legacy/Select/SelectOption.test.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]

packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx

@@ -1,15 +1,15 @@
 import { action } from '@storybook/addon-actions';
-import { Meta, Story } from '@storybook/react';
-import React, { useState, useCallback } from 'react';
+import { useArgs } from '@storybook/client-api';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React, { useCallback } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 
-import { UseState } from '../../../../utils/storybook/UseState';
 import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory';
 
 import { Select, AsyncSelect as AsyncSelectComponent } from './Select';
 
-const meta: Meta = {
+const meta: ComponentMeta<typeof Select> = {
   title: 'Forms/Legacy/Select',
   component: Select,
   decorators: [withCenteredStory],
@@ -31,7 +31,6 @@ const meta: Meta = {
         'id',
         'inputId',
         'defaultValue',
-        'loading',
         'aria-label',
         'noOptionsMessage',
         'onChange',
@@ -66,21 +65,16 @@ const options = [
   { label: 'Another label', value: 'Another value ' },
 ];
 
-export const Basic: Story = (args) => {
+export const Basic: ComponentStory<typeof Select> = (args) => {
+  const [, updateArgs] = useArgs();
   return (
-    <UseState initialState={initialValue}>
-      {(value, updateValue) => {
-        return (
-          <Select
-            {...args}
-            onChange={(value: SelectableValue<string>) => {
-              action('onChanged fired')(value);
-              updateValue(value);
-            }}
-          />
-        );
+    <Select
+      {...args}
+      onChange={(value) => {
+        action('onChange fired')(value);
+        updateArgs({ value });
       }}
-    </UseState>
+    />
   );
 };
 Basic.args = {
@@ -89,32 +83,32 @@ Basic.args = {
   width: 20,
 };
 
-export const AsyncSelect: Story = (args) => {
-  const [isLoading, setIsLoading] = useState<boolean>(args.loading);
-  const [asyncValue, setAsyncValue] = useState<SelectableValue<string>>();
-  const loadAsyncOptions = useCallback((inputValue) => {
-    return new Promise<Array<SelectableValue<string>>>((resolve) => {
-      setTimeout(() => {
-        setIsLoading(false);
-        resolve(options.filter((option) => option.label && option.label.includes(inputValue)));
-      }, 1000);
-    });
-  }, []);
+export const AsyncSelect: ComponentStory<typeof AsyncSelectComponent> = (args) => {
+  const [, updateArgs] = useArgs();
+  const loadAsyncOptions = useCallback(
+    (inputValue) => {
+      return new Promise<Array<SelectableValue<string>>>((resolve) => {
+        setTimeout(() => {
+          updateArgs({ isLoading: false });
+          resolve(options.filter((option) => option.label && option.label.includes(inputValue)));
+        }, 1000);
+      });
+    },
+    [updateArgs]
+  );
   return (
     <AsyncSelectComponent
       {...args}
-      value={asyncValue}
-      isLoading={isLoading}
       loadOptions={loadAsyncOptions}
       onChange={(value) => {
         action('onChange')(value);
-        setAsyncValue(value);
+        updateArgs({ value });
       }}
     />
   );
 };
 AsyncSelect.args = {
-  loading: true,
+  isLoading: true,
   defaultOptions: true,
   width: 20,
 };

packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx

@@ -6,7 +6,7 @@ import { default as ReactAsyncSelect } from 'react-select/async';
 import Creatable from 'react-select/creatable';
 
 // Components
-import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { SelectableValue } from '@grafana/data';
 
 import { ThemeContext } from '../../../../themes';
 import { CustomScrollbar } from '../../../CustomScrollbar/CustomScrollbar';
@@ -54,7 +54,7 @@ export const MenuList = (props: any) => {
 export class Select<T> extends PureComponent<LegacySelectProps<T>> {
   static contextType = ThemeContext;
 
-  static defaultProps: Partial<LegacySelectProps<any>> = {
+  static defaultProps: Partial<LegacySelectProps<unknown>> = {
     className: '',
     isDisabled: false,
     isSearchable: true,
@@ -118,7 +118,7 @@ export class Select<T> extends PureComponent<LegacySelectProps<T>> {
     const creatableOptions: any = {};
 
     if (allowCustomValue) {
-      SelectComponent = Creatable as any;
+      SelectComponent = Creatable;
       creatableOptions.formatCreateLabel = formatCreateLabel ?? ((input: string) => input);
     }
 
@@ -142,7 +142,7 @@ export class Select<T> extends PureComponent<LegacySelectProps<T>> {
               onChange={onChange}
               options={options}
               placeholder={placeholder || 'Choose'}
-              styles={resetSelectStyles(this.context as GrafanaTheme2)}
+              styles={resetSelectStyles(this.context)}
               isDisabled={isDisabled}
               isLoading={isLoading}
               isClearable={isClearable}
@@ -168,7 +168,9 @@ export class Select<T> extends PureComponent<LegacySelectProps<T>> {
 }
 
 export class AsyncSelect<T> extends PureComponent<AsyncProps<T>> {
-  static defaultProps: Partial<AsyncProps<any>> = {
+  static contextType = ThemeContext;
+
+  static defaultProps: Partial<AsyncProps<unknown>> = {
     className: '',
     components: {},
     loadingMessage: () => 'Loading...',
@@ -245,7 +247,7 @@ export class AsyncSelect<T> extends PureComponent<AsyncProps<T>> {
               defaultOptions={defaultOptions}
               placeholder={placeholder || 'Choose'}
               //@ts-expect-error
-              styles={resetSelectStyles()}
+              styles={resetSelectStyles(this.context)}
               loadingMessage={() => loadingMessage}
               noOptionsMessage={noOptionsMessage}
               isDisabled={isDisabled}