Improve typings for Select Input options

frontend/src/Components/Form/SelectInput.tsx

@@ -1,9 +1,15 @@
 import classNames from 'classnames';
-import React, { ChangeEvent, SyntheticEvent, useCallback } from 'react';
+import React, {
+  ChangeEvent,
+  ComponentProps,
+  SyntheticEvent,
+  useCallback,
+} from 'react';
 import { InputChanged } from 'typings/inputs';
 import styles from './SelectInput.css';
 
-interface SelectInputOption {
+export interface SelectInputOption
+  extends Pick<ComponentProps<'option'>, 'disabled'> {
   key: string | number;
   value: string | number | (() => string | number);
 }

frontend/src/Components/Table/TablePager.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React, { useCallback, useMemo, useState } from 'react';
-import SelectInput from 'Components/Form/SelectInput';
+import SelectInput, { SelectInputOption } from 'Components/Form/SelectInput';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -34,7 +34,7 @@ function TablePager({
   const isLastPage = page === totalPages;
 
   const pages = useMemo(() => {
-    return Array.from(new Array(totalPages), (_x, i) => {
+    return Array.from(new Array(totalPages), (_x, i): SelectInputOption => {
       const pageNumber = i + 1;
 
       return {

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.tsx

@@ -5,7 +5,7 @@ import { createSelector } from 'reselect';
 import AppState from 'App/State/AppState';
 import InteractiveImportAppState from 'App/State/InteractiveImportAppState';
 import * as commandNames from 'Commands/commandNames';
-import SelectInput from 'Components/Form/SelectInput';
+import SelectInput, { SelectInputOption } from 'Components/Form/SelectInput';
 import Icon from 'Components/Icon';
 import Button from 'Components/Link/Button';
 import SpinnerButton from 'Components/Link/SpinnerButton';
@@ -164,7 +164,7 @@ const COLUMNS = [
   },
 ];
 
-const importModeOptions = [
+const importModeOptions: SelectInputOption[] = [
   {
     key: 'chooseImportMode',
     value: () => translate('ChooseImportMode'),
@@ -343,7 +343,7 @@ function InteractiveImportModalContent(
       }
     );
 
-    const options = [
+    const options: SelectInputOption[] = [
       {
         key: 'select',
         value: translate('SelectDropdown'),

frontend/src/Settings/MediaManagement/Naming/NamingModal.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import FieldSet from 'Components/FieldSet';
-import SelectInput from 'Components/Form/SelectInput';
+import SelectInput, { SelectInputOption } from 'Components/Form/SelectInput';
 import TextInput from 'Components/Form/TextInput';
 import Button from 'Components/Link/Button';
 import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
@@ -17,7 +17,15 @@ import TokenCase from './TokenCase';
 import TokenSeparator from './TokenSeparator';
 import styles from './NamingModal.css';
 
-const separatorOptions: { key: TokenSeparator; value: string }[] = [
+type SeparatorInputOption = Omit<SelectInputOption, 'key'> & {
+  key: TokenSeparator;
+};
+
+type CaseInputOption = Omit<SelectInputOption, 'key'> & {
+  key: TokenCase;
+};
+
+const separatorOptions: SeparatorInputOption[] = [
   {
     key: ' ',
     get value() {
@@ -44,7 +52,7 @@ const separatorOptions: { key: TokenSeparator; value: string }[] = [
   },
 ];
 
-const caseOptions: { key: TokenCase; value: string }[] = [
+const caseOptions: CaseInputOption[] = [
   {
     key: 'title',
     get value() {