Fix bug where missing key was not recongized if value was union

.storybook/main.ts

@@ -3,7 +3,6 @@ import type { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    "@storybook/addon-onboarding",
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zod-error-viewer",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "license": "MIT",
   "author": {
     "name": "Ben Lorantfy",
@@ -59,7 +59,6 @@
     "@storybook/addon-essentials": "^8.1.5",
     "@storybook/addon-interactions": "^8.1.5",
     "@storybook/addon-links": "^8.1.5",
-    "@storybook/addon-onboarding": "^8.1.5",
     "@storybook/blocks": "^8.1.5",
     "@storybook/react": "^8.1.5",
     "@storybook/react-vite": "^8.1.5",

src/ZodErrorViewer.stories.tsx

@@ -130,6 +130,7 @@ const missingKeysData = {
 /**
  * An example showing how missing keys are displayed
  */
+// TODO: add test for missing key that is a union
 export const MissingKeys: Story = {
   args: {
     data: missingKeysData,
@@ -140,6 +141,7 @@ export const MissingKeys: Story = {
           height: z.number(),
           age: z.number(),
           sideKick: z.literal("Chewbacca"),
+          hairColor: z.union([z.literal("brown"), z.literal("black")]),
         }),
       })
       .safeParse(missingKeysData).error!,

src/ZodErrorViewer.test.tsx

@@ -225,7 +225,7 @@ test("renders correctly for missing keys", () => {
   expect(`\n${document.body.innerText}\n`).toMatchInlineSnapshot(`
     "
     1{
-    2	"person": { // Error: Object missing required keys: 'height', 'age', 'sideKick'
+    2	"person": { // Error: Object missing required keys: 'height', 'age', 'sideKick', 'hairColor'
     3		"name": "Han Solo"
     4	}
     5}

src/ZodErrorViewer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { type CSSProperties, useState, useMemo } from "react";
-import { z, ZodError, ZodIssueCode } from "zod";
+import { z, ZodError, ZodIssue, ZodIssueCode } from "zod";
 
 const defaultTheme = {
   lineNumber: "black",
@@ -258,17 +258,13 @@ function getRelevantIssues(error: ZodError, path: Array<string | number>) {
 
   const missingKeys = [];
   for (const issue of error.issues) {
-    if (
-      issue.code === ZodIssueCode.invalid_type &&
-      issue.received === "undefined" &&
-      issue.message === "Required" &&
-      issue.path.slice(0, issue.path.length - 1).join(".") === path.join(".")
-    ) {
+    if (isMissing(issue, path)) {
       missingKeys.push(issue.path[issue.path.length - 1]);
     } else if (
-      issue.code === ZodIssueCode.invalid_literal &&
-      typeof issue.received === "undefined" &&
-      issue.path.slice(0, issue.path.length - 1).join(".") === path.join(".")
+      issue.code === ZodIssueCode.invalid_union &&
+      issue.unionErrors.every((err) =>
+        err.issues.some((iss) => isMissing(iss, path)),
+      )
     ) {
       missingKeys.push(issue.path[issue.path.length - 1]);
     }
@@ -288,6 +284,26 @@ function getRelevantIssues(error: ZodError, path: Array<string | number>) {
   return relevantIssues;
 }
 
+function isMissing(issue: ZodIssue, path: Array<string | number>) {
+  if (
+    issue.code === ZodIssueCode.invalid_type &&
+    issue.received === "undefined" &&
+    issue.path.slice(0, issue.path.length - 1).join(".") === path.join(".")
+  ) {
+    return true;
+  }
+
+  if (
+    issue.code === ZodIssueCode.invalid_literal &&
+    typeof issue.received === "undefined" &&
+    issue.path.slice(0, issue.path.length - 1).join(".") === path.join(".")
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
 function Line({
   num,
   value,