updated sse supporting react-openapi

react-openapi/src/components/fields/renderers/BooleanField.tsx

@@ -1,14 +1,44 @@
 import React from "react";
-import { FormControl, FormControlLabel, Switch, FormHelperText } from "@mui/material";
+import { Box, FormControl, FormControlLabel, Switch, FormHelperText, ToggleButton, ToggleButtonGroup } from "@mui/material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import CancelIcon from "@mui/icons-material/Cancel";
 import type { FieldConfig } from "../../../types";
 
 interface Props {
   field: FieldConfig;
   value: any;
   onChange: (value: any) => void;
+  nullable?: boolean;
 }
 
-export function BooleanField({ field, value, onChange }: Props) {
+export function BooleanField({ field, value, onChange, nullable }: Props) {
+  if (nullable) {
+    const strValue = String(value ?? "");
+    return (
+      <Box>
+        <Box sx={{ fontSize: "0.75rem", color: "text.secondary", mb: 0.5, fontWeight: 600 }}>
+          {field.label}
+        </Box>
+        <ToggleButtonGroup
+          value={strValue}
+          exclusive
+          onChange={(_, v) => onChange(v ?? "")}
+          size="small"
+        >
+          <ToggleButton value="" sx={{ color: "text.disabled", borderColor: "divider" }}>
+            <Box sx={{ width: 16, height: 16, borderRadius: "50%", bgcolor: "action.disabledBackground" }} />
+          </ToggleButton>
+          <ToggleButton value="true" sx={{ color: "success.main", borderColor: "success.main" }}>
+            <CheckCircleIcon fontSize="small" />
+          </ToggleButton>
+          <ToggleButton value="false" sx={{ color: "error.main", borderColor: "error.main" }}>
+            <CancelIcon fontSize="small" />
+          </ToggleButton>
+        </ToggleButtonGroup>
+      </Box>
+    );
+  }
+
   return (
     <FormControl component="fieldset" fullWidth size="small">
       <FormControlLabel