mail-react: Enable TypeScript strict mode

.changeset/mail-react-strict-mode.md

@@ -0,0 +1,7 @@
+---
+"@dextinity/mail-react": patch
+---
+
+Type the return value of `OneOfBlock` and `OptionalBlock` as nullable
+
+Both components already returned `null` (when no block is selected, respectively when the optional block is hidden), but the emitted types claimed they always return an element. They now include `null`.

packages/mail-react/src/components/text/HtmlText.tsx

@@ -43,7 +43,6 @@ interface HtmlTextImplementationProps extends HtmlTextOwnProps {
     className?: string;
     style?: CSSProperties;
     children?: ReactNode;
-    [key: string]: unknown;
 }
 
 export type HtmlTextProps<E extends keyof JSX.IntrinsicElements = "td"> = HtmlTextOwnProps & {

packages/mail-react/src/storybook/MjmlWarningsPanel.tsx

@@ -27,21 +27,23 @@ export function MjmlWarningsPanel({ active }: { active: boolean }) {
 
     return (
         <AddonPanel active={active}>
-            {renderResult && (
-                <div style={{ padding: 16 }}>
-                    {renderResult.mjmlWarnings.length === 0 ? (
-                        <p style={{ color: "green" }}>✓ No MJML warnings</p>
-                    ) : (
-                        <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
-                            {renderResult.mjmlWarnings.map((warning, index) => (
-                                <li key={index} style={{ marginBottom: 8 }}>
-                                    <strong>{warning.tagName}</strong> (line {warning.line}): {warning.message}
-                                </li>
-                            ))}
-                        </ul>
-                    )}
-                </div>
-            )}
+            <React.Fragment>
+                {renderResult && (
+                    <div style={{ padding: 16 }}>
+                        {renderResult.mjmlWarnings.length === 0 ? (
+                            <p style={{ color: "green" }}>✓ No MJML warnings</p>
+                        ) : (
+                            <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
+                                {renderResult.mjmlWarnings.map((warning, index) => (
+                                    <li key={index} style={{ marginBottom: 8 }}>
+                                        <strong>{warning.tagName}</strong> (line {warning.line}): {warning.message}
+                                    </li>
+                                ))}
+                            </ul>
+                        )}
+                    </div>
+                )}
+            </React.Fragment>
         </AddonPanel>
     );
 }

packages/mail-react/tsconfig.json

@@ -5,6 +5,7 @@
         "moduleResolution": "NodeNext",
         "outDir": "lib",
         "rootDir": "src",
+        "strict": true,
         "target": "ES2022"
     },
     "exclude": ["node_modules", "lib"],