From dcc795c54026fd67aa4ec342694b446ce607aa37 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Fri, 15 Oct 2021 12:00:34 -0500 Subject: [PATCH 1/8] add euiautosizer --- .../auto_sizer/auto_sizer.testenv.tsx | 21 +++++++++++++++++++ src/components/auto_sizer/auto_sizer.tsx | 19 +++++++++++++++++ src/components/auto_sizer/index.ts | 9 ++++++++ src/components/index.ts | 6 ++++-- 4 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 src/components/auto_sizer/auto_sizer.testenv.tsx create mode 100644 src/components/auto_sizer/auto_sizer.tsx create mode 100644 src/components/auto_sizer/index.ts diff --git a/src/components/auto_sizer/auto_sizer.testenv.tsx b/src/components/auto_sizer/auto_sizer.testenv.tsx new file mode 100644 index 00000000000..ca6e94d5e1b --- /dev/null +++ b/src/components/auto_sizer/auto_sizer.testenv.tsx @@ -0,0 +1,21 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; + +export const EuiAutoSizer = ({ + children, + defaultHeight, + defaultWidth, +}: any) => { + const childrenParams = { + height: defaultHeight ?? 600, + width: defaultWidth ?? 600, + }; + return
{children(childrenParams)}
; +}; diff --git a/src/components/auto_sizer/auto_sizer.tsx b/src/components/auto_sizer/auto_sizer.tsx new file mode 100644 index 00000000000..7ea5cbe7bf5 --- /dev/null +++ b/src/components/auto_sizer/auto_sizer.tsx @@ -0,0 +1,19 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React, { FunctionComponent } from 'react'; +import AutoSizer, { AutoSizerProps } from 'react-virtualized-auto-sizer'; + +export interface EuiAutoSizerProps extends AutoSizerProps {} + +export const EuiAutoSizer: FunctionComponent = ({ + children, + ...rest +}) => { + return {children}; +}; diff --git a/src/components/auto_sizer/index.ts b/src/components/auto_sizer/index.ts new file mode 100644 index 00000000000..60d0bc66cac --- /dev/null +++ b/src/components/auto_sizer/index.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export { EuiAutoSizer, EuiAutoSizerProps } from './auto_sizer'; diff --git a/src/components/index.ts b/src/components/index.ts index c74dbbbf706..71efca404a6 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -6,13 +6,15 @@ * Side Public License, v 1. */ +export * from './accessibility'; + export * from './accordion'; export * from './aspect_ratio'; -export * from './avatar'; +export * from './auto_sizer'; -export * from './accessibility'; +export * from './avatar'; export * from './badge'; From 7bfa2e36c80986be62500078e87f3ea1344005ad Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Fri, 15 Oct 2021 12:01:42 -0500 Subject: [PATCH 2/8] use euiautosizer --- src/components/code/_code_block.tsx | 10 +++++----- .../selectable_list/selectable_list.tsx | 20 +++++++++---------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx index f4065d4e73e..672ab627062 100644 --- a/src/components/code/_code_block.tsx +++ b/src/components/code/_code_block.tsx @@ -22,8 +22,8 @@ import React, { import classNames from 'classnames'; import { highlight, RefractorNode, listLanguages } from 'refractor'; import { FixedSizeList, ListChildComponentProps } from 'react-window'; -import AutoSizer from 'react-virtualized-auto-sizer'; import { keys, useCombinedRefs } from '../../services'; +import { EuiAutoSizer } from '../auto_sizer'; import { EuiButtonIcon } from '../button'; import { keysOf, CommonProps, ExclusiveUnion } from '../common'; import { EuiCopy } from '../copy'; @@ -394,7 +394,7 @@ export const EuiCodeBlockImpl: FunctionComponent = ({
{isVirtualized ? ( - + {({ height, width }) => ( = ({ {ListRow} )} - + ) : ( 
                   
@@ -436,7 +436,7 @@ export const EuiCodeBlockImpl: FunctionComponent = ({
   return (
     

       {isVirtualized ? (
-        
+        
           {({ height, width }) => (
              = ({
               {ListRow}
             
           )}
-        
+        
       ) : (
         
   extends ReactWindowListChildComponentProps {
@@ -310,7 +310,7 @@ export class EuiSelectableList extends Component> {
 
     return (
       

-        
+        
           {({ width, height }) => (
              extends Component> {
               {this.ListRow}
             
           )}
-        
+        
       

     );
   }

From 1be90a85a2a265d671166df71b6240bb1a87832e Mon Sep 17 00:00:00 2001
From: Greg Thompson 
Date: Fri, 15 Oct 2021 12:02:01 -0500
Subject: [PATCH 3/8] use euiautosizer testenv mock

---
 scripts/jest/setup/mocks.js                   |    5 +
 .../__snapshots__/_code_block.test.tsx.snap   |   29 +-
 .../__snapshots__/code_block.test.tsx.snap    |   29 +-
 .../selectable_list.test.tsx.snap             | 2346 ++++++++++++++++-
 4 files changed, 2361 insertions(+), 48 deletions(-)

diff --git a/scripts/jest/setup/mocks.js b/scripts/jest/setup/mocks.js
index 8a19548f404..40ef676c97e 100644
--- a/scripts/jest/setup/mocks.js
+++ b/scripts/jest/setup/mocks.js
@@ -1,3 +1,8 @@
+jest.mock('./../../../src/components/auto_sizer', () => {
+  const { EuiAutoSizer } = require('./../../../src/components/auto_sizer/auto_sizer.testenv');
+  return { EuiAutoSizer };
+});
+
 jest.mock('./../../../src/components/icon', () => {
   const { EuiIcon } = require('./../../../src/components/icon/icon.testenv');
   return { EuiIcon };
diff --git a/src/components/code/__snapshots__/_code_block.test.tsx.snap b/src/components/code/__snapshots__/_code_block.test.tsx.snap
index d81ff99f035..2ed9a063cea 100644
--- a/src/components/code/__snapshots__/_code_block.test.tsx.snap
+++ b/src/components/code/__snapshots__/_code_block.test.tsx.snap
@@ -78,9 +78,32 @@ exports[`EuiCodeBlockImpl block renders a virtualized code block 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--hasControl prismjs language-text testClass1 testClass2"
   style="max-height:300px"
 >
-  

+  

+    
+      
+        
+          var some = 'code';
+
+        
+        
+          console.log(some);
+        
+      
+    

+  

   

diff --git a/src/components/code/__snapshots__/code_block.test.tsx.snap b/src/components/code/__snapshots__/code_block.test.tsx.snap
index 2d52ec41355..ee4994ecbdc 100644
--- a/src/components/code/__snapshots__/code_block.test.tsx.snap
+++ b/src/components/code/__snapshots__/code_block.test.tsx.snap
@@ -5,9 +5,32 @@ exports[`EuiCodeBlock dynamic content renders a virtualized code block 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--hasControl prismjs language-text testClass1 testClass2"
   style="height:50%"
 >
-  

+  

+    
+      
+        
+          var some = 'code';
+
+        
+        
+          console.log(some);
+        
+      
+    

+  

   

diff --git a/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap b/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap
index bf34412568e..d218fbfb86e 100644
--- a/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap
+++ b/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap
@@ -5,9 +5,174 @@ exports[`EuiSelectableListItem is rendered 1`] = `
   class="euiSelectableList testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  

+  

+    

+      
    
+        
  • 
+          
+            
+            
+              
+                Titan
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Enceladus
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Mimas
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Tethys
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Hyperion
+              
+            
+          
+        
    • 
+      

+    

+  

 

 `;
 
@@ -16,9 +181,193 @@ exports[`EuiSelectableListItem props activeOptionIndex 1`] = `
   class="euiSelectableList testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  

+  

+    

+      
    
+        
  • 
+          
+            
+            
+              
+                Titan
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Enceladus
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Mimas
+              
+            
+            
+               
+              
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Tethys
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Hyperion
+              
+            
+          
+        
    • 
+      

+    

+  

 

 `;
 
@@ -27,9 +376,174 @@ exports[`EuiSelectableListItem props allowExclusions 1`] = `
   class="euiSelectableList testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  

+  

+    

+      
    
+        
  • 
+          
+            
+            
+              
+                Titan
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Enceladus
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Mimas
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Tethys
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Hyperion
+              
+            
+          
+        
    • 
+      

+    

+  

 

 `;
 
@@ -38,9 +552,174 @@ exports[`EuiSelectableListItem props bordered 1`] = `
   class="euiSelectableList euiSelectableList-bordered testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  

+  

+    

+      
    
+        
  • 
+          
+            
+            
+              
+                Titan
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Enceladus
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Mimas
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Tethys
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Hyperion
+              
+            
+          
+        
    • 
+      

+    

+  

 

 `;
 
@@ -49,9 +728,174 @@ exports[`EuiSelectableListItem props height is forced 1`] = `
   class="euiSelectableList testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  

+  

+    

+      
    
+        
  • 
+          
+            
+            
+              
+                Titan
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Enceladus
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Mimas
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Tethys
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Hyperion
+              
+            
+          
+        
    • 
+      

+    

+  

 

 `;
 
@@ -60,9 +904,174 @@ exports[`EuiSelectableListItem props height is full 1`] = `
   class="euiSelectableList euiSelectableList-fullHeight testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  

+  

+    

+      
    
+        
  • 
+          
+            
+            
+              
+                Titan
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Enceladus
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Mimas
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Tethys
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Hyperion
+              
+            
+          
+        
    • 
+      

+    

+  

 

 `;
 
@@ -71,9 +1080,174 @@ exports[`EuiSelectableListItem props renderOption 1`] = `
   class="euiSelectableList testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  

+  

+    

+      
    
+        
  • 
+          
+            
+            
+              
+                 => Titan
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                 => Enceladus
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                 => Mimas
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                 => Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                 => Tethys
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                 => Hyperion
+              
+            
+          
+        
    • 
+      

+    

+  

 

 `;
 
@@ -82,9 +1256,174 @@ exports[`EuiSelectableListItem props rowHeight 1`] = `
   class="euiSelectableList testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  

+  

+    

+      
    
+        
  • 
+          
+            
+            
+              
+                Titan
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Enceladus
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Mimas
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Tethys
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Hyperion
+              
+            
+          
+        
    • 
+      

+    

+  

 

 `;
 
@@ -93,9 +1432,179 @@ exports[`EuiSelectableListItem props searchValue 1`] = `
   class="euiSelectableList testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  

+  

+    

+      
    
+        
  • 
+          
+            
+            
+              
+                Titan
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Enceladus
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                
+                  Mi
+                
+                mas
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Tethys
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Hyperion
+              
+            
+          
+        
    • 
+      

+    

+  

 

 `;
 
@@ -104,9 +1613,179 @@ exports[`EuiSelectableListItem props searchValue 2`] = `
   class="euiSelectableList testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  

+  

+    

+      
    
+        
  • 
+          
+            
+            
+              
+                Titan
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Enceladus
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                
+                  Mi
+                
+                mas
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Tethys
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Hyperion
+              
+            
+          
+        
    • 
+      

+    

+  

 

 `;
 
@@ -115,9 +1794,150 @@ exports[`EuiSelectableListItem props showIcons can be turned off 1`] = `
   class="euiSelectableList testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  

+  

+    

+      
    
+        
  • 
+          
+            
+              
+                Titan
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+              
+                Enceladus
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+              
+                Mimas
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+              
+                Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+              
+                Tethys
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+              
+                Hyperion
+              
+            
+          
+        
    • 
+      

+    

+  

 

 `;
 
@@ -126,9 +1946,174 @@ exports[`EuiSelectableListItem props singleSelection can be forced so that at le
   class="euiSelectableList testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  

+  

+    

+      
    
+        
  • 
+          
+            
+            
+              
+                Titan
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Enceladus
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Mimas
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Tethys
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Hyperion
+              
+            
+          
+        
    • 
+      

+    

+  

 

 `;
 
@@ -137,9 +2122,174 @@ exports[`EuiSelectableListItem props singleSelection can be turned on 1`] = `
   class="euiSelectableList testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  

+  

+    

+      
    
+        
  • 
+          
+            
+            
+              
+                Titan
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Enceladus
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Mimas
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Tethys
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Hyperion
+              
+            
+          
+        
    • 
+      

+    

+  

 

 `;
 
@@ -148,8 +2298,120 @@ exports[`EuiSelectableListItem props visibleOptions 1`] = `
   class="euiSelectableList testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  

+  

+    

+      
    
+        
  • 
+          
+            
+            
+              
+                Mimas
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Tethys
+              
+            
+          
+        
    • 
+        
  • 
+          
+            
+            
+              
+                Hyperion
+              
+            
+          
+        
    • 
+      

+    

+  

 

 `;

From 34449daae4202ef110693e66775699f4334a69fd Mon Sep 17 00:00:00 2001
From: Greg Thompson 
Date: Fri, 15 Oct 2021 12:13:54 -0500
Subject: [PATCH 4/8] CL

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ab51d3a915..043ddcc9917 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Updated `tokenKeyword` to match the definition of keyword field type ([#5251](https://github.com/elastic/eui/pull/5251))
+- Added `EuiAutoSizer` component for setting dimensions on virtualized lists ([#5278](https://github.com/elastic/eui/pull/5278))
+- Added `testenv` mock for `EuiAutoSizer` ([#5278](https://github.com/elastic/eui/pull/5278))
 
 **Breaking changes**
 

From 0935be70e457a8f47b0b48b34e904686819c0c6e Mon Sep 17 00:00:00 2001
From: Greg Thompson 
Date: Fri, 15 Oct 2021 16:34:53 -0500
Subject: [PATCH 5/8] docs

---
 src-docs/src/routes.js                        |  3 ++
 src-docs/src/views/auto_sizer/auto_sizer.tsx  | 30 +++++++++++++
 .../views/auto_sizer/auto_sizer_example.js    | 42 +++++++++++++++++++
 3 files changed, 75 insertions(+)
 create mode 100644 src-docs/src/views/auto_sizer/auto_sizer.tsx
 create mode 100644 src-docs/src/views/auto_sizer/auto_sizer_example.js

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 1715ec87737..cab7f97ea2e 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -38,6 +38,8 @@ import { AccordionExample } from './views/accordion/accordion_example';
 
 import { AspectRatioExample } from './views/aspect_ratio/aspect_ratio_example';
 
+import { AutoSizerExample } from './views/auto_sizer/auto_sizer_example';
+
 import { AvatarExample } from './views/avatar/avatar_example';
 
 import { BadgeExample } from './views/badge/badge_example';
@@ -477,6 +479,7 @@ const navigation = [
     name: 'Utilities',
     items: [
       AccessibilityExample,
+      AutoSizerExample,
       BeaconExample,
       ColorExample,
       ColorPaletteExample,
diff --git a/src-docs/src/views/auto_sizer/auto_sizer.tsx b/src-docs/src/views/auto_sizer/auto_sizer.tsx
new file mode 100644
index 00000000000..87c053cfc13
--- /dev/null
+++ b/src-docs/src/views/auto_sizer/auto_sizer.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { css } from '@emotion/react';
+
+import { EuiAutoSizer, EuiCode, EuiPanel } from '../../../../src/components';
+
+export default () => {
+  const containerStyles = css`
+    height: 200px;
+    width: 100%;
+  `;
+
+  const panelStyles = css`
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `;
+
+  return (
+    

+      
+        {({ height, width }) => (
+          
+            {`height: ${height}, width: ${width}`}
+          
+        )}
+      
+    

+  );
+};
diff --git a/src-docs/src/views/auto_sizer/auto_sizer_example.js b/src-docs/src/views/auto_sizer/auto_sizer_example.js
new file mode 100644
index 00000000000..27cbf664720
--- /dev/null
+++ b/src-docs/src/views/auto_sizer/auto_sizer_example.js
@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { GuideSectionTypes } from '../../components';
+import { EuiLink, EuiAutoSizer } from '../../../../src/components';
+
+import AutoSizer from './auto_sizer';
+const autoSizerSource = require('!!raw-loader!./auto_sizer');
+
+const autoSizerSnippet = `
+  {({height, width}) =>
+    ()
+  }
+`;
+
+export const AutoSizerExample = {
+  title: 'Auto sizer',
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: autoSizerSource,
+        },
+      ],
+      text: (
+        

+          EuiAutoSizer helps components that use virtualized
+          rendering and/or require explicit dimentions to fill all available
+          space in the parent container. See the{' '}
+          
+            react-virtualized-auto-sizer
+          {' '}
+          documentation as EuiAutoSizer is a passthrough
+          component for AutoSizer.
+        

+      ),
+      props: { EuiAutoSizer },
+      demo: ,
+      snippet: autoSizerSnippet,
+    },
+  ],
+};

From 946cf55f43c2c18ff948f09e20e2217d2f2629ba Mon Sep 17 00:00:00 2001
From: Greg Thompson 
Date: Mon, 18 Oct 2021 10:54:03 -0500
Subject: [PATCH 6/8] props table

---
 scripts/babel/react-docgen-typescript.js            | 1 +
 src-docs/src/views/auto_sizer/auto_sizer_example.js | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/scripts/babel/react-docgen-typescript.js b/scripts/babel/react-docgen-typescript.js
index e241e06035e..28998f8f684 100644
--- a/scripts/babel/react-docgen-typescript.js
+++ b/scripts/babel/react-docgen-typescript.js
@@ -63,6 +63,7 @@ module.exports = function ({ types }) {
 
           // external modules whose props must be whitelisted
           const whiteListedParent = [
+            'AutoSizerProps',
             'DragDropContextProps',
             'DraggableProps',
             'DroppableProps',
diff --git a/src-docs/src/views/auto_sizer/auto_sizer_example.js b/src-docs/src/views/auto_sizer/auto_sizer_example.js
index 27cbf664720..d5402a70c6e 100644
--- a/src-docs/src/views/auto_sizer/auto_sizer_example.js
+++ b/src-docs/src/views/auto_sizer/auto_sizer_example.js
@@ -25,7 +25,7 @@ export const AutoSizerExample = {
       text: (
         

           EuiAutoSizer helps components that use virtualized
-          rendering and/or require explicit dimentions to fill all available
+          rendering and/or require explicit dimensions to fill all available
           space in the parent container. See the{' '}
           
             react-virtualized-auto-sizer

From cc41c7316255eb53c2cd48c248df2ba7e422d227 Mon Sep 17 00:00:00 2001
From: Greg Thompson 
Date: Mon, 25 Oct 2021 13:40:30 -0500
Subject: [PATCH 7/8] simplify wrapper

---
 src/components/auto_sizer/auto_sizer.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/auto_sizer/auto_sizer.tsx b/src/components/auto_sizer/auto_sizer.tsx
index 7ea5cbe7bf5..b1ce97b3f51 100644
--- a/src/components/auto_sizer/auto_sizer.tsx
+++ b/src/components/auto_sizer/auto_sizer.tsx
@@ -6,14 +6,8 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent } from 'react';
 import AutoSizer, { AutoSizerProps } from 'react-virtualized-auto-sizer';
 
 export interface EuiAutoSizerProps extends AutoSizerProps {}
 
-export const EuiAutoSizer: FunctionComponent = ({
-  children,
-  ...rest
-}) => {
-  return {children};
-};
+export class EuiAutoSizer extends AutoSizer {}

From 8b93c57d2b61b382943bd1092db3b77ec558769e Mon Sep 17 00:00:00 2001
From: Greg Thompson 
Date: Mon, 25 Oct 2021 13:42:59 -0500
Subject: [PATCH 8/8] add data-eui attr to testenv mock

---
 .../auto_sizer/auto_sizer.testenv.tsx         |  2 +-
 .../__snapshots__/_code_block.test.tsx.snap   |  4 +-
 .../__snapshots__/code_block.test.tsx.snap    |  4 +-
 .../selectable_list.test.tsx.snap             | 56 ++++++++++++++-----
 4 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/src/components/auto_sizer/auto_sizer.testenv.tsx b/src/components/auto_sizer/auto_sizer.testenv.tsx
index ca6e94d5e1b..12d86eaa1f3 100644
--- a/src/components/auto_sizer/auto_sizer.testenv.tsx
+++ b/src/components/auto_sizer/auto_sizer.testenv.tsx
@@ -17,5 +17,5 @@ export const EuiAutoSizer = ({
     height: defaultHeight ?? 600,
     width: defaultWidth ?? 600,
   };
-  return 
{children(childrenParams)}
;
+  return 
{children(childrenParams)}
;
 };
diff --git a/src/components/code/__snapshots__/_code_block.test.tsx.snap b/src/components/code/__snapshots__/_code_block.test.tsx.snap
index 2ed9a063cea..87b636f6e33 100644
--- a/src/components/code/__snapshots__/_code_block.test.tsx.snap
+++ b/src/components/code/__snapshots__/_code_block.test.tsx.snap
@@ -78,7 +78,9 @@ exports[`EuiCodeBlockImpl block renders a virtualized code block 1`] = `
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--hasControl prismjs language-text testClass1 testClass2"
   style="max-height:300px"
 >
-  

+  

     
-  

+  

     
-  

+  

     

-  

+  

     

-  

+  

     

-  

+  

     

-  

+  

     

-  

+  

     

-  

+  

     

-  

+  

     

-  

+  

     

-  

+  

     

-  

+  

     

-  

+  

     

-  

+  

     

-  

+