Type improvements and cleanup

packages/manager/cypress/component/components/select.spec.tsx

@@ -280,7 +280,9 @@ componentTests('Select', (mount) => {
             onChange={(_, newValue) =>
               setValue({
                 label: newValue?.label ?? '',
-                value: newValue?.value.replace(' ', '-').toLowerCase() ?? '',
+                value:
+                  newValue?.value.toString().replace(' ', '-').toLowerCase() ??
+                  '',
               })
             }
             textFieldProps={{

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx

@@ -23,11 +23,15 @@ import { useCreateIPv6RangeMutation } from 'src/queries/networking/networking';
 import { ExplainerCopy } from './ExplainerCopy';
 
 import type { IPv6Prefix } from '@linode/api-v4/lib/networking';
-import type { Item } from 'src/components/EnhancedSelect/Select';
 
 export type IPType = 'v4Private' | 'v4Public';
 
-const ipOptions: Item<IPType>[] = [
+type IPOption = {
+  label: string;
+  value: IPType;
+};
+
+const ipOptions: IPOption[] = [
   { label: 'Public', value: 'v4Public' },
   { label: 'Private', value: 'v4Private' },
 ];

packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.test.tsx

@@ -7,7 +7,6 @@ import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers';
 import { RebuildFromImage } from './RebuildFromImage';
 
 vi.mock('src/utilities/scrollErrorIntoView');
-vi.mock('src/components/EnhancedSelect/Select');
 
 const props = {
   disabled: false,

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx

@@ -19,7 +19,7 @@ import type {
   InterfacePayload,
   InterfacePurpose,
 } from '@linode/api-v4/lib/linodes/types';
-import type { Item } from 'src/components/EnhancedSelect/Select';
+import type { AutocompleteOption } from '@linode/ui';
 import type { ExtendedIP } from 'src/utilities/ipUtils';
 
 interface InterfaceErrors extends VPCInterfaceErrors, OtherInterfaceErrors {}
@@ -93,7 +93,7 @@ export const InterfaceSelect = (props: InterfaceSelectProps) => {
 
   const [newVlan, setNewVlan] = React.useState('');
 
-  const purposeOptions: Item<ExtendedPurpose>[] = [
+  const purposeOptions: AutocompleteOption<ExtendedPurpose>[] = [
     {
       label: 'Public Internet',
       value: 'public',

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/KernelSelect.test.tsx

@@ -28,8 +28,6 @@ const kernels = [
   kernelFactory.build({ id: 'linode/direct-disk', label: 'Direct Disk' }),
 ];
 
-vi.mock('src/components/EnhancedSelect/Select');
-
 describe('Kernel Select component', () => {
   it('should render a select with the correct number of options', async () => {
     const props: KernelSelectProps = {

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsPasswordPanel.tsx

@@ -1,10 +1,9 @@
-import { Accordion, Notice } from '@linode/ui';
+import { Accordion, Notice, Select } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import EnhancedSelect from 'src/components/EnhancedSelect/Select';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 import {
   useAllLinodeDisksQuery,
@@ -89,7 +88,7 @@ export const LinodeSettingsPasswordPanel = (props: Props) => {
     ?.filter((d) => d.filesystem !== 'swap')
     .map((d) => ({ label: d.label, value: d.id }));
 
-  // If there is only one selectable disk, select it automaticly
+  // If there is only one selectable disk, select it automatically
   React.useEffect(() => {
     if (diskOptions !== undefined && diskOptions.length === 1) {
       setSelectedDiskId(diskOptions[0].value);
@@ -121,17 +120,20 @@ export const LinodeSettingsPasswordPanel = (props: Props) => {
       <form>
         {generalError && <Notice text={generalError} variant="error" />}
         {!isBareMetalInstance ? (
-          <EnhancedSelect
+          <Select
+            onChange={(_, item) =>
+              setSelectedDiskId(Number(item?.value) ?? null)
+            }
+            value={
+              diskOptions?.find((item) => item.value === selectedDiskId) ?? null
+            }
             data-qa-select-linode
             disabled={isReadOnly}
             errorText={disksError?.[0].reason}
-            isClearable={false}
-            isLoading={disksLoading}
             label="Disk"
-            onChange={(item) => setSelectedDiskId(item.value)}
-            options={diskOptions}
+            loading={disksLoading}
+            options={diskOptions ?? []}
             placeholder="Select a Disk"
-            value={diskOptions?.find((item) => item.value === selectedDiskId)}
           />
         ) : null}
         <React.Suspense fallback={<SuspenseLoader />}>

packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/LinodeSummary.tsx

@@ -28,12 +28,12 @@ import { NetworkGraphs } from './NetworkGraphs';
 import { StatsPanel } from './StatsPanel';
 
 import type { ChartProps } from './NetworkGraphs';
+import type { AutocompleteOption } from '@linode/ui';
 import type {
   CPUTimeData,
   DiskIOTimeData,
   Point,
 } from 'src/components/AreaChart/types';
-import type { Item } from 'src/components/EnhancedSelect/Select';
 
 setUpCharts();
 
@@ -83,7 +83,7 @@ const LinodeSummary = (props: Props) => {
       statsErrorString
     );
 
-  const handleChartRangeChange = (e: Item<string>) => {
+  const handleChartRangeChange = (e: AutocompleteOption<string>) => {
     setRangeSelection(e.value);
   };
 
@@ -237,21 +237,21 @@ const LinodeSummary = (props: Props) => {
     <Grid container spacing={2}>
       <Grid sx={{ display: 'flex', justifyContent: 'flex-end' }} xs={12}>
         <Autocomplete
-          defaultValue={options[0]}
-          disableClearable
-          noMarginTop
-          sx={{ width: 150, mt: 1 }}
-          id="chartRange"
           textFieldProps={{
             hideLabel: true,
           }}
+          defaultValue={options[0]}
+          disableClearable
+          id="chartRange"
           label="Select Time Range"
+          noMarginTop
           onChange={(e, value) => handleChartRangeChange(value)}
           options={options}
+          sx={{ mt: 1, width: 150 }}
         />
       </Grid>
       <Grid md={6} xs={12}>
-        <Paper variant="outlined" sx={{ height: 370 }}>
+        <Paper sx={{ height: 370 }} variant="outlined">
           <StatsPanel
             renderBody={renderCPUChart}
             title="CPU (%)"
@@ -260,7 +260,7 @@ const LinodeSummary = (props: Props) => {
         </Paper>
       </Grid>
       <Grid md={6} xs={12}>
-        <Paper variant="outlined" sx={{ height: 370 }}>
+        <Paper sx={{ height: 370 }} variant="outlined">
           <StatsPanel
             renderBody={renderDiskIOChart}
             title="Disk I/O (blocks/s)"

packages/ui/src/components/Autocomplete/Autocomplete.tsx

@@ -17,8 +17,21 @@ import type { TextFieldProps } from '../TextField';
 import type {
   AutocompleteProps,
   AutocompleteRenderInputParams,
+  AutocompleteValue,
 } from '@mui/material/Autocomplete';
 
+type Option<T = number | string> = {
+  label: string;
+  value: T;
+};
+
+export type AutocompleteOption<
+  T = number | string,
+  Nullable extends boolean = false
+> = Nullable extends true
+  ? AutocompleteValue<Option<T>, false, false, false>
+  : Option<T>;
+
 export interface EnhancedAutocompleteProps<
   T extends { label: string },
   Multiple extends boolean | undefined = undefined,

packages/ui/src/components/Select/Select.tsx

@@ -10,7 +10,7 @@ import type { EnhancedAutocompleteProps } from '../Autocomplete';
 
 export type SelectOptionType = {
   label: string;
-  value: string;
+  value: number | string;
 };
 interface InternalOptionType extends SelectOptionType {
   /**
@@ -29,6 +29,7 @@ interface InternalOptionType extends SelectOptionType {
 export interface SelectProps
   extends Pick<
     EnhancedAutocompleteProps<SelectOptionType>,
+    | 'disabled'
     | 'errorText'
     | 'helperText'
     | 'id'
@@ -265,13 +266,13 @@ const getOptions = ({ creatable, inputValue, options }: GetOptionsProps) => {
     const matchingOptions = options.filter(
       (opt) =>
         opt.label.toLowerCase().includes(inputValue.toLowerCase()) ||
-        opt.value.toLowerCase().includes(inputValue.toLowerCase())
+        opt.value.toString().toLowerCase().includes(inputValue.toLowerCase())
     );
 
     const exactMatch = matchingOptions.some(
       (opt) =>
         opt.label.toLowerCase() === inputValue.toLowerCase() ||
-        opt.value.toLowerCase() === inputValue.toLowerCase()
+        opt.value.toString().toLowerCase() === inputValue.toLowerCase()
     );
 
     // If there's an exact match, don't show is as a create option