From 0d2a303bad7741c5551cbb99bd6ad05da767b9a2 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 6 Dec 2024 00:03:37 -0800
Subject: [PATCH] Fix data grid props tables all incorrectly extending HTML
 elements

- this is due to all the components existing on the same page, which typically doesn't happen

- we need to switch to a per-component array which doesn't get polluted as easily
---
 packages/eui-docgen/src/filter_prop.ts | 13 +++++++++----
 packages/eui-docgen/src/main.ts        |  4 ++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/eui-docgen/src/filter_prop.ts b/packages/eui-docgen/src/filter_prop.ts
index 629ba78ccad..8defb27ae07 100644
--- a/packages/eui-docgen/src/filter_prop.ts
+++ b/packages/eui-docgen/src/filter_prop.ts
@@ -44,7 +44,7 @@ const allowedComponents = ['EuiDataGridVirtualizationOptions'];
 export const filterProp = (
   prop: PropItem,
   component: any,
-  componentExtends: string[]
+  componentExtends: Record<string, string[]>
 ) => {
   if (allowedProps.includes(prop.name)) {
     return true;
@@ -82,11 +82,16 @@ export const filterProp = (
   }
 
   if (prop.parent) {
-    //Check if props are extended from other node module
+    // Check if props are extended from other node module
     if (allowedParents.includes(prop.parent.name)) return true;
-    if (!componentExtends.includes(prop.parent.name)) {
-      componentExtends.push(prop.parent.name);
+
+    if (!componentExtends[component.name]) {
+      componentExtends[component.name] = [];
+    }
+    if (!componentExtends[component.name].includes(prop.parent.name)) {
+      componentExtends[component.name].push(prop.parent.name);
     }
+
     if (allowedProps.includes(prop.name)) {
       return true;
     }
diff --git a/packages/eui-docgen/src/main.ts b/packages/eui-docgen/src/main.ts
index c0ba044fc70..501045e9b51 100644
--- a/packages/eui-docgen/src/main.ts
+++ b/packages/eui-docgen/src/main.ts
@@ -36,7 +36,7 @@ const main = async () => {
   for (const file of files) {
     const fileRelativePath = path.relative(euiSrcPath, file);
 
-    const componentExtends: Array<string> = [];
+    const componentExtends: Record<string, string[]> = {};
     const parser = docgen.withCustomConfig(path.join(euiPackagePath, 'tsconfig.json'), {
       propFilter: (prop, component) => filterProp(prop, component, componentExtends),
       shouldExtractLiteralValuesFromEnum: true,
@@ -51,7 +51,7 @@ const main = async () => {
       const processedComponent = processComponent({
         componentDoc: parsedComponent,
         filePath: fileRelativePath,
-        componentExtends: componentExtends,
+        componentExtends: componentExtends[parsedComponent.displayName] || [],
       });
 
       if (!processedComponent) {