[EuiAutoSizer] AutoSizer wrapper and testenv mock

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `40.1.0`.
+- 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))
 
 ## [`40.1.0`](https://github.com/elastic/eui/tree/v40.1.0)
 

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',

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 };

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';
@@ -491,6 +493,7 @@ const navigation = [
     name: 'Utilities',
     items: [
       AccessibilityExample,
+      AutoSizerExample,
       BeaconExample,
       ColorExample,
       ColorPaletteExample,

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 (
+    <div css={containerStyles}>
+      <EuiAutoSizer>
+        {({ height, width }) => (
+          <EuiPanel css={[panelStyles, { height, width }]}>
+            <EuiCode>{`height: ${height}, width: ${width}`}</EuiCode>
+          </EuiPanel>
+        )}
+      </EuiAutoSizer>
+    </div>
+  );
+};

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 = `<EuiAutoSizer>
+  {({height, width}) =>
+    (<!-- Component goes here -->)
+  }
+</EuiAutoSizer>`;
+
+export const AutoSizerExample = {
+  title: 'Auto sizer',
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: autoSizerSource,
+        },
+      ],
+      text: (
+        <p>
+          <strong>EuiAutoSizer</strong> helps components that use virtualized
+          rendering and/or require explicit dimensions to fill all available
+          space in the parent container. See the{' '}
+          <EuiLink href="https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md">
+            react-virtualized-auto-sizer
+          </EuiLink>{' '}
+          documentation as <strong>EuiAutoSizer</strong> is a passthrough
+          component for <strong>AutoSizer</strong>.
+        </p>
+      ),
+      props: { EuiAutoSizer },
+      demo: <AutoSizer />,
+      snippet: autoSizerSnippet,
+    },
+  ],
+};

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 <div data-eui="EuiAutoSizer">{children(childrenParams)}</div>;
+};

src/components/auto_sizer/auto_sizer.tsx

@@ -0,0 +1,13 @@
+/*
+ * 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 AutoSizer, { AutoSizerProps } from 'react-virtualized-auto-sizer';
+
+export interface EuiAutoSizerProps extends AutoSizerProps {}
+
+export class EuiAutoSizer extends AutoSizer {}

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';

src/components/code/__snapshots__/_code_block.test.tsx.snap

@@ -79,8 +79,33 @@ exports[`EuiCodeBlockImpl block renders a virtualized code block 1`] = `
   style="max-height:300px"
 >
   <div
-    style="overflow:visible;width:0"
-  />
+    data-eui="EuiAutoSizer"
+  >
+    <pre
+      class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap euiCodeBlock__pre--isVirtualized"
+      style="position:relative;height:600px;width:600px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
+      tabindex="0"
+    >
+      <code
+        class="euiCodeBlock__code text"
+        style="height:36px;width:100%"
+      >
+        <span
+          class="euiCodeBlock__line"
+          style="position:absolute;left:0;top:0;height:18px;width:100%"
+        >
+          var some = 'code';
+
+        </span>
+        <span
+          class="euiCodeBlock__line"
+          style="position:absolute;left:0;top:18px;height:18px;width:100%"
+        >
+          console.log(some);
+        </span>
+      </code>
+    </pre>
+  </div>
   <div
     class="euiCodeBlock__controls"
   >

src/components/code/__snapshots__/code_block.test.tsx.snap

@@ -6,8 +6,33 @@ exports[`EuiCodeBlock dynamic content renders a virtualized code block 1`] = `
   style="height:50%"
 >
   <div
-    style="overflow:visible;height:0;width:0"
-  />
+    data-eui="EuiAutoSizer"
+  >
+    <pre
+      class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap euiCodeBlock__pre--isVirtualized"
+      style="position:relative;height:600px;width:600px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
+      tabindex="0"
+    >
+      <code
+        class="euiCodeBlock__code text"
+        style="height:36px;width:100%"
+      >
+        <span
+          class="euiCodeBlock__line"
+          style="position:absolute;left:0;top:0;height:18px;width:100%"
+        >
+          var some = 'code';
+
+        </span>
+        <span
+          class="euiCodeBlock__line"
+          style="position:absolute;left:0;top:18px;height:18px;width:100%"
+        >
+          console.log(some);
+        </span>
+      </code>
+    </pre>
+  </div>
   <div
     class="euiCodeBlock__controls"
   >

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<EuiCodeBlockImplProps> = ({
           <EuiFocusTrap clickOutsideDisables={true}>
             <div className={fullScreenClasses}>
               {isVirtualized ? (
-                <AutoSizer>
+                <EuiAutoSizer>
                   {({ height, width }) => (
                     <FixedSizeList
                       height={height}
@@ -413,7 +413,7 @@ export const EuiCodeBlockImpl: FunctionComponent<EuiCodeBlockImplProps> = ({
                       {ListRow}
                     </FixedSizeList>
                   )}
-                </AutoSizer>
+                </EuiAutoSizer>
               ) : (
                 <pre className={preClasses} tabIndex={0}>
                   <code className={codeClasses} onKeyDown={onKeyDown}>
@@ -436,7 +436,7 @@ export const EuiCodeBlockImpl: FunctionComponent<EuiCodeBlockImplProps> = ({
   return (
     <div {...wrapperProps}>
       {isVirtualized ? (
-        <AutoSizer disableHeight={typeof overflowHeight === 'number'}>
+        <EuiAutoSizer disableHeight={typeof overflowHeight === 'number'}>
           {({ height, width }) => (
             <FixedSizeList
               height={height ?? overflowHeight}
@@ -455,7 +455,7 @@ export const EuiCodeBlockImpl: FunctionComponent<EuiCodeBlockImplProps> = ({
               {ListRow}
             </FixedSizeList>
           )}
-        </AutoSizer>
+        </EuiAutoSizer>
       ) : (
         <pre
           ref={combinedRef}

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';