fix: Allow default assumptions

js/repl/Repl.tsx

@@ -6,7 +6,7 @@ import React, { type ChangeEvent } from "react";
 import { prettySize, compareVersions } from "./Utils";
 import ErrorBoundary from "./ErrorBoundary";
 import CodeMirrorPanel from "./CodeMirrorPanel";
-import ReplOptions from "./ReplOptions";
+import ReplOptions, { IndeterminateCheckboxStatus } from "./ReplOptions";
 import StorageService from "./StorageService";
 import UriUtils from "./UriUtils";
 import loadBundle from "./loadBundle";
@@ -581,10 +581,15 @@ class Repl extends React.Component<Props, State> {
     }, this._pluginsUpdatedSetStateCallback);
   };
 
-  _onAssumptionsChange = (value: string, isChecked: boolean) => {
+  _onAssumptionsChange = (
+    value: string,
+    status: IndeterminateCheckboxStatus
+  ) => {
     const { assumptions } = this.state.envConfig;
-    if (isChecked === true) assumptions[value] = isChecked;
-    else delete assumptions[value];
+    if (status === IndeterminateCheckboxStatus.Indeterminate)
+      delete assumptions[value];
+    else assumptions[value] = status === 1;
+
     this.setState((state) => {
       return { envConfig: { ...state.envConfig, assumptions } };
     }, this._pluginsUpdatedSetStateCallback);

js/repl/ReplOptions.tsx

@@ -84,7 +84,10 @@ type ToggleVersion = (event: ChangeEvent) => void;
 type ShowOfficialExternalPluginsChanged = (value: string) => void;
 type PluginSearch = (value: string) => void;
 type PluginChange = (plugin: any) => void;
-type AssumptionsChange = (value: string, isChecked: boolean) => void;
+type AssumptionsChange = (
+  value: string,
+  status: IndeterminateCheckboxStatus
+) => void;
 
 type Props = {
   babelVersion: string | undefined | null;
@@ -182,6 +185,57 @@ const PresetOption = ({
   );
 };
 
+export const enum IndeterminateCheckboxStatus {
+  Indeterminate = -1,
+  Unchecked = 0,
+  Checked = 1,
+}
+
+class IndeterminateCheckbox extends React.Component<{
+  status: IndeterminateCheckboxStatus;
+  className: string;
+  onChange: (status: IndeterminateCheckboxStatus) => void;
+}> {
+  state: { status: IndeterminateCheckboxStatus } = { status: -1 };
+  ele: HTMLInputElement = null;
+  status: IndeterminateCheckboxStatus = -1;
+  componentDidMount() {
+    this.ele.indeterminate = true;
+    this.state.status = this.props.status;
+  }
+
+  componentDidUpdate(prev) {
+    const status = this.state.status;
+
+    if (status === IndeterminateCheckboxStatus.Indeterminate) {
+      this.ele.indeterminate = true;
+    } else {
+      this.ele.indeterminate = false;
+      this.ele.checked = status === IndeterminateCheckboxStatus.Checked;
+    }
+
+    if (prev.status !== status) {
+      this.props.onChange(status);
+    }
+  }
+
+  render() {
+    return (
+      <input
+        type="checkbox"
+        className={this.props.className}
+        ref={(ele) => (this.ele = ele)}
+        onClick={(event) => {
+          event.nativeEvent.stopImmediatePropagation();
+          this.setState({
+            status: ++this.state.status > 1 ? -1 : this.state.status,
+          });
+        }}
+      />
+    );
+  }
+}
+
 export default function ReplOptions(props: Props) {
   return (
     <div className={`${styles.wrapper} ${props.className}`}>
@@ -726,8 +780,19 @@ class ExpandedContainer extends Component<Props, State> {
               {ASSUMPTIONS_OPTIONS.map((option) => {
                 const isChecked =
                   assumptions[option] === "undefined"
-                    ? false
+                    ? undefined
                     : assumptions[option];
+
+                const button = (
+                  <IndeterminateCheckbox
+                    status={isChecked == null ? -1 : isChecked ? 1 : 0}
+                    className={styles.envPresetCheckbox}
+                    onChange={(status) => {
+                      this._onAssumptionsCheck(option, status);
+                    }}
+                  />
+                );
+
                 return (
                   <label className={styles.envPresetRow}>
                     <LinkToAssumptionDocs
@@ -736,14 +801,7 @@ class ExpandedContainer extends Component<Props, State> {
                     >
                       {option}
                     </LinkToAssumptionDocs>
-                    <input
-                      checked={isChecked}
-                      className={styles.envPresetCheckbox}
-                      onChange={(event) =>
-                        this._onAssumptionsCheck(option, event.target.checked)
-                      }
-                      type="checkbox"
-                    />
+                    {button}
                   </label>
                 );
               })}
@@ -826,8 +884,8 @@ class ExpandedContainer extends Component<Props, State> {
     this.props.showOfficialExternalPluginsChanged(value);
   };
 
-  _onAssumptionsCheck = (value, isChecked) => {
-    this.props.onAssumptionsChange(value, isChecked);
+  _onAssumptionsCheck = (value, status) => {
+    this.props.onAssumptionsChange(value, status);
   };
 
   _pluginChanged = (e, plugin) => {