From a0d5a706144c5af9b8b3d077a2b8d50176aa9671 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Fri, 22 Jul 2022 20:07:53 +0200
Subject: [PATCH] chore(website): add current version of typescript to
 playground dropdown (#5341)

---
 packages/website/src/components/OptionsSelector.tsx      | 5 ++---
 .../website/src/components/editor/useSandboxServices.ts  | 9 ++++++++-
 packages/website/src/components/inputs/Dropdown.tsx      | 2 ++
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
index f57f2600f49..b9b78edfad0 100644
--- a/packages/website/src/components/OptionsSelector.tsx
+++ b/packages/website/src/components/OptionsSelector.tsx
@@ -90,10 +90,9 @@ function OptionsSelectorContent({
             name="ts"
             className="text--right"
             value={state.ts}
+            disabled={!tsVersions.length}
             onChange={updateTS}
-            options={((tsVersions.length && tsVersions) || [state.ts]).filter(
-              item => parseFloat(item) >= 3.3,
-            )}
+            options={(tsVersions.length && tsVersions) || [state.ts]}
           />
         </label>
         <label className={styles.optionLabel}>
diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts
index 4eec5f35695..c786e999604 100644
--- a/packages/website/src/components/editor/useSandboxServices.ts
+++ b/packages/website/src/components/editor/useSandboxServices.ts
@@ -110,7 +110,14 @@ export const useSandboxServices = (
 
         const webLinter = new WebLinter(system, compilerOptions, lintUtils);
 
-        props.onLoaded(webLinter.ruleNames, sandboxInstance.supportedVersions);
+        props.onLoaded(
+          webLinter.ruleNames,
+          Array.from(
+            new Set([...sandboxInstance.supportedVersions, window.ts.version]),
+          )
+            .filter(item => parseFloat(item) >= 3.3)
+            .sort((a, b) => b.localeCompare(a)),
+        );
 
         setServices({
           main,
diff --git a/packages/website/src/components/inputs/Dropdown.tsx b/packages/website/src/components/inputs/Dropdown.tsx
index 929f4bc6bbb..5c10b2bffc3 100644
--- a/packages/website/src/components/inputs/Dropdown.tsx
+++ b/packages/website/src/components/inputs/Dropdown.tsx
@@ -13,6 +13,7 @@ export interface DropdownProps<T> {
   readonly value: T | undefined;
   readonly name: string;
   readonly className?: string;
+  readonly disabled?: boolean;
 }
 
 function Dropdown<T extends boolean | string | number>(
@@ -27,6 +28,7 @@ function Dropdown<T extends boolean | string | number>(
   return (
     <select
       name={props.name}
+      disabled={props.disabled}
       value={String(props.value)}
       className={clsx(styles.optionSelect, props.className)}
       onChange={(e): void => {