From c40b91f41c2e8d40f2bd59c493e62efe44453ee0 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 15 Jul 2021 11:07:45 -0500
Subject: [PATCH 01/13] virtualized code block

---
 src-docs/src/views/code/code_block_pre.js     |   2 +-
 src-docs/src/views/code/code_example.js       |  32 +++
 .../__snapshots__/_code_block.test.tsx.snap   |  27 ++
 src/components/code/_code_block.scss          |   4 +
 src/components/code/_code_block.test.tsx      |  13 +
 src/components/code/_code_block.tsx           | 265 +++++++++---------
 src/components/code/utils.tsx                 | 122 ++++++++
 7 files changed, 336 insertions(+), 129 deletions(-)
 create mode 100644 src/components/code/utils.tsx

diff --git a/src-docs/src/views/code/code_block_pre.js b/src-docs/src/views/code/code_block_pre.js
index 4df2aad65b01..e32c430afd5e 100644
--- a/src-docs/src/views/code/code_block_pre.js
+++ b/src-docs/src/views/code/code_block_pre.js
@@ -6,7 +6,7 @@ export default () => (
   <div>
     <EuiCodeBlock
       language="jsx"
-      fontSize="m"
+      fontSize="s"
       paddingSize="m"
       color="dark"
       overflowHeight={300}
diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js
index a41b0e056ad4..1920577954ff 100644
--- a/src-docs/src/views/code/code_example.js
+++ b/src-docs/src/views/code/code_example.js
@@ -25,6 +25,14 @@ const codeBlockSnippet = `<EuiCodeBlock language="html" paddingSize="s" isCopyab
 </EuiCodeBlock>
 `;
 
+import CodeBlockVirtualized from './virtualized';
+const codeBlockVirtualizedSource = require('!!raw-loader!./virtualized');
+const codeBlockVirtualizedHtml = renderToHtml(CodeBlockVirtualized);
+const codeBlockVirtualizedSnippet = `<EuiCodeBlock language="json" isVirtualized overflowHeight={300}>
+{ \`{}\` }
+</EuiCodeBlock>
+`;
+
 import CodeBlockPre from './code_block_pre';
 const codeBlockPreSource = require('!!raw-loader!./code_block_pre');
 const codeBlockPreHtml = renderToHtml(CodeBlockPre);
@@ -108,6 +116,30 @@ export const CodeExample = {
       demo: <CodeBlock />,
       playground: codeBlockConfig,
     },
+    {
+      title: 'Code block virtualization',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: codeBlockVirtualizedSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: codeBlockVirtualizedHtml,
+        },
+      ],
+      text: (
+        <p>
+          For large blocks of code, set <EuiCode>isVirtualized</EuiCode> to
+          reduce the number of rendered rows and improve load times. Note that{' '}
+          <EuiCode>overflowHeight</EuiCode> is required when using this
+          configuration.
+        </p>
+      ),
+      props: { EuiCodeBlock },
+      snippet: codeBlockVirtualizedSnippet,
+      demo: <CodeBlockVirtualized />,
+    },
     {
       title: 'Code block and white-space',
       source: [
diff --git a/src/components/code/__snapshots__/_code_block.test.tsx.snap b/src/components/code/__snapshots__/_code_block.test.tsx.snap
index 644a2d0e1e05..9c684ffb5e5f 100644
--- a/src/components/code/__snapshots__/_code_block.test.tsx.snap
+++ b/src/components/code/__snapshots__/_code_block.test.tsx.snap
@@ -73,6 +73,33 @@ exports[`EuiCodeBlockImpl block renders a pre block tag with a css class modifie
 </div>
 `;
 
+exports[`EuiCodeBlockImpl block renders a virtualized code block 1`] = `
+<div
+  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--hasControls prismjs language-text testClass1 testClass2"
+  style="max-height:300px"
+>
+  <div
+    style="overflow:visible;width:0"
+  />
+  <div
+    class="euiCodeBlock__controls"
+  >
+    <button
+      aria-label="Expand"
+      class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiCodeBlock__fullScreenButton"
+      type="button"
+    >
+      <span
+        aria-hidden="true"
+        class="euiButtonIcon__icon"
+        color="inherit"
+        data-euiicon-type="fullScreen"
+      />
+    </button>
+  </div>
+</div>
+`;
+
 exports[`EuiCodeBlockImpl block renders with transparent background 1`] = `
 <div
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--transparentBackground prismjs language-text"
diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss
index 73407b1dba7b..59c77b1db394 100644
--- a/src/components/code/_code_block.scss
+++ b/src/components/code/_code_block.scss
@@ -20,6 +20,10 @@
     white-space: pre-wrap;
   }
 
+  .euiCodeBlock__pre--isVirtualized {
+    position: relative;
+  }
+
   .euiCodeBlock__code {
     @include euiCodeFont;
     display: block;
diff --git a/src/components/code/_code_block.test.tsx b/src/components/code/_code_block.test.tsx
index ca8c5088324f..da29ac57276c 100644
--- a/src/components/code/_code_block.test.tsx
+++ b/src/components/code/_code_block.test.tsx
@@ -87,5 +87,18 @@ describe('EuiCodeBlockImpl', () => {
       );
       expect(component).toMatchSnapshot();
     });
+
+    test('renders a virtualized code block', () => {
+      const component = render(
+        <EuiCodeBlockImpl
+          inline={false}
+          isVirtualized={true}
+          overflowHeight={300}
+          {...requiredProps}>
+          {code}
+        </EuiCodeBlockImpl>
+      );
+      expect(component).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx
index 9ff85f59e891..92022c035d3a 100644
--- a/src/components/code/_code_block.tsx
+++ b/src/components/code/_code_block.tsx
@@ -8,18 +8,23 @@
 
 import React, {
   CSSProperties,
+  HTMLAttributes,
   FunctionComponent,
   KeyboardEvent,
   ReactNode,
+  memo,
+  forwardRef,
   useEffect,
   useMemo,
   useState,
 } from 'react';
 import classNames from 'classnames';
-import { highlight, AST, RefractorNode, listLanguages } from 'refractor';
+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 { EuiButtonIcon } from '../button';
-import { keysOf } from '../common';
+import { keysOf, CommonProps, ExclusiveUnion } from '../common';
 import { EuiCopy } from '../copy';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiI18n } from '../i18n';
@@ -27,117 +32,37 @@ import { useInnerText } from '../inner_text';
 import { useMutationObserver } from '../observer/mutation_observer';
 import { useResizeObserver } from '../observer/resize_observer';
 import { EuiOverlayMask } from '../overlay_mask';
+import { highlightByLine, nodeToHtml } from './utils';
 
-type ExtendedRefractorNode = RefractorNode & {
-  lineStart?: number;
-  lineEnd?: number;
-};
+// eslint-disable-next-line local/forward-ref
+const virtualizedOuterElement = ({
+  className,
+}: HTMLAttributes<HTMLPreElement>) =>
+  memo(
+    forwardRef<any, any>((props, ref) => (
+      <pre {...props} ref={ref} className={className} tabIndex={0} />
+    ))
+  );
+
+// eslint-disable-next-line local/forward-ref
+const virtualizedInnerElement = ({
+  className,
+  onKeyDown,
+}: HTMLAttributes<HTMLElement>) =>
+  memo(
+    forwardRef<any, any>((props, ref) => (
+      <code {...props} ref={ref} className={className} onKeyDown={onKeyDown} />
+    ))
+  );
 
 const SUPPORTED_LANGUAGES = listLanguages();
 const DEFAULT_LANGUAGE = 'text';
 
-const isAstElement = (node: RefractorNode): node is AST.Element =>
-  node.hasOwnProperty('type') && node.type === 'element';
-
-const nodeToHtml = (
-  node: RefractorNode,
-  idx: number,
-  nodes: RefractorNode[],
-  depth: number = 0
-): ReactNode => {
-  if (isAstElement(node)) {
-    const { properties, tagName, children } = node;
-
-    return React.createElement(
-      tagName,
-      {
-        ...properties,
-        key: `node-${depth}-${idx}`,
-        className: classNames(properties.className),
-      },
-      children && children.map((el, i) => nodeToHtml(el, i, nodes, depth + 1))
-    );
-  }
-
-  return node.value;
-};
-
-const addLineData = (
-  nodes: ExtendedRefractorNode[],
-  data = { lineNumber: 1 }
-): ExtendedRefractorNode[] => {
-  return nodes.reduce<ExtendedRefractorNode[]>((result, node) => {
-    const lineStart = data.lineNumber;
-    if (node.type === 'text') {
-      if (!node.value.match(/\r\n?|\n/)) {
-        node.lineStart = lineStart;
-        node.lineEnd = lineStart;
-        result.push(node);
-      } else {
-        const lines = node.value.split(/\r\n?|\n/);
-        lines.forEach((line, i) => {
-          const num = i === 0 ? data.lineNumber : ++data.lineNumber;
-          result.push({
-            type: 'text',
-            value: i === lines.length - 1 ? line : `${line}\n`,
-            lineStart: num,
-            lineEnd: num,
-          });
-        });
-      }
-      return result;
-    }
-
-    if (node.children && node.children.length) {
-      const children = addLineData(node.children, data);
-      const first = children[0];
-      const last = children[children.length - 1];
-      const start = first.lineStart ?? lineStart;
-      const end = last.lineEnd ?? lineStart;
-      if (start !== end) {
-        children.forEach((node) => {
-          result.push(node);
-        });
-      } else {
-        node.lineStart = start;
-        node.lineEnd = end;
-        node.children = children;
-        result.push(node);
-      }
-      return result;
-    }
-
-    result.push(node);
-    return result;
-  }, []);
-};
-
-function wrapLines(nodes: ExtendedRefractorNode[]) {
-  const grouped: ExtendedRefractorNode[][] = [];
-  nodes.forEach((node) => {
-    const lineStart = node.lineStart! - 1;
-    if (grouped[lineStart]) {
-      grouped[lineStart].push(node);
-    } else {
-      grouped[lineStart] = [node];
-    }
-  });
-  const wrapped: RefractorNode[] = [];
-  grouped.forEach((node) => {
-    wrapped.push({
-      type: 'element',
-      tagName: 'span',
-      properties: {
-        className: ['euiCodeBlock__line'],
-      },
-      children: node,
-    });
-  });
-  return wrapped;
-}
-
-const highlightByLine = (children: string, language: string) => {
-  return wrapLines(addLineData(highlight(children, language)));
+// Based on observed line height for non-virtualized code blocks
+const fontSizeToRowHeightMap = {
+  s: 16,
+  m: 19,
+  l: 21,
 };
 
 const fontSizeToClassNameMap = {
@@ -160,7 +85,24 @@ const paddingSizeToClassNameMap: { [paddingSize in PaddingSize]: string } = {
 
 export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
 
-export interface EuiCodeBlockImplProps {
+// overflowHeight is required when using virtualization
+type VirtualizedOptionProps = ExclusiveUnion<
+  {
+    isVirtualized: true;
+    /**
+     * Sets the maximum container height.
+     * Accepts a pixel value (`300`) or a percentage (`'100%'`)
+     * Ensure the container has calcuable height when using a percentage
+     */
+    overflowHeight: number | string;
+  },
+  {
+    isVirtualized?: boolean;
+    overflowHeight?: number | string;
+  }
+>;
+
+export type EuiCodeBlockImplProps = CommonProps & {
   className?: string;
   fontSize?: FontSize;
 
@@ -176,11 +118,10 @@ export interface EuiCodeBlockImplProps {
 
   /**
    * Sets the syntax highlighting for a specific language
-   * @see https://github.com/wooorm/refractor#syntaxes
+   * @see https://prismjs.com/#supported-languages
    * for options
    */
   language?: string;
-  overflowHeight?: number;
   paddingSize?: PaddingSize;
   transparentBackground?: boolean;
   /**
@@ -189,7 +130,7 @@ export interface EuiCodeBlockImplProps {
    * `pre-wrap` respects line breaks/white space but does force them to wrap the line when necessary.
    */
   whiteSpace?: 'pre' | 'pre-wrap';
-}
+} & VirtualizedOptionProps;
 
 /**
  * This is the base component extended by EuiCode and EuiCodeBlock.
@@ -206,6 +147,7 @@ export const EuiCodeBlockImpl: FunctionComponent<EuiCodeBlockImplProps> = ({
   children,
   className,
   overflowHeight,
+  isVirtualized: _isVirtualized,
   ...rest
 }) => {
   const language: string = useMemo(
@@ -226,17 +168,31 @@ export const EuiCodeBlockImpl: FunctionComponent<EuiCodeBlockImplProps> = ({
     setWrapperRef,
   ]);
   const { width, height } = useResizeObserver(wrapperRef);
+  const rowHeight = useMemo(() => fontSizeToRowHeightMap[fontSize], [fontSize]);
 
-  const content = useMemo(() => {
+  // Used by `FixedSizeList` when `isVirtualized=true` or `children` is parsable (`isVirtualized=true`)
+  const data: RefractorNode[] = useMemo(() => {
     if (typeof children !== 'string') {
-      return children;
+      return [];
     }
-    const nodes = inline
+    return inline
       ? highlight(children, language)
       : highlightByLine(children, language);
-    return nodes.length === 0 ? children : nodes.map(nodeToHtml);
   }, [children, language, inline]);
 
+  const isVirtualized = useMemo(() => _isVirtualized && Array.isArray(data), [
+    _isVirtualized,
+    data,
+  ]);
+
+  // Used by `pre` when `isVirtualized=false` or `children` is not parsable (`isVirtualized=false`)
+  const content: React.ReactElement[] | ReactNode = useMemo(() => {
+    if (!Array.isArray(data) || data.length < 1) {
+      return children;
+    }
+    return data.map(nodeToHtml);
+  }, [data, children]);
+
   const doesOverflow = () => {
     if (!wrapperRef) return;
 
@@ -291,6 +247,7 @@ export const EuiCodeBlockImpl: FunctionComponent<EuiCodeBlockImplProps> = ({
   const preClasses = classNames('euiCodeBlock__pre', {
     'euiCodeBlock__pre--whiteSpacePre': whiteSpace === 'pre',
     'euiCodeBlock__pre--whiteSpacePreWrap': whiteSpace === 'pre-wrap',
+    'euiCodeBlock__pre--isVirtualized': isVirtualized,
   });
 
   const optionalStyles: CSSProperties = {};
@@ -380,6 +337,14 @@ export const EuiCodeBlockImpl: FunctionComponent<EuiCodeBlockImplProps> = ({
     return codeBlockControls;
   };
 
+  const ListRow = React.memo(
+    ({ data, index, style }: ListChildComponentProps) => {
+      const row = data[index];
+      row.properties.style = style;
+      return nodeToHtml(row, index, data, 0);
+    }
+  );
+
   const getFullScreenDisplay = (codeBlockControls?: JSX.Element) => {
     let fullScreenDisplay;
 
@@ -397,11 +362,33 @@ export const EuiCodeBlockImpl: FunctionComponent<EuiCodeBlockImplProps> = ({
         <EuiOverlayMask>
           <EuiFocusTrap clickOutsideDisables={true}>
             <div className={fullScreenClasses}>
-              <pre className={preClasses} tabIndex={0}>
-                <code className={codeClasses} onKeyDown={onKeyDown}>
-                  {content}
-                </code>
-              </pre>
+              {isVirtualized ? (
+                <AutoSizer>
+                  {({ height, width }) => (
+                    <FixedSizeList
+                      height={height}
+                      width={width}
+                      itemData={data}
+                      itemSize={rowHeight}
+                      itemCount={data.length}
+                      outerElementType={virtualizedOuterElement({
+                        className: preClasses,
+                      })}
+                      innerElementType={virtualizedInnerElement({
+                        className: preClasses,
+                        onKeyDown,
+                      })}>
+                      {ListRow}
+                    </FixedSizeList>
+                  )}
+                </AutoSizer>
+              ) : (
+                <pre className={preClasses} tabIndex={0}>
+                  <code className={codeClasses} onKeyDown={onKeyDown}>
+                    {content}
+                  </code>
+                </pre>
+              )}
 
               {codeBlockControls}
             </div>
@@ -416,13 +403,35 @@ export const EuiCodeBlockImpl: FunctionComponent<EuiCodeBlockImplProps> = ({
   const codeBlockControls = getCodeBlockControls(innerText);
   return (
     <div {...wrapperProps}>
-      <pre
-        ref={combinedRef}
-        style={optionalStyles}
-        className={preClasses}
-        tabIndex={tabIndex}>
-        {codeSnippet}
-      </pre>
+      {isVirtualized ? (
+        <AutoSizer disableHeight={typeof overflowHeight === 'number'}>
+          {({ height, width }) => (
+            <FixedSizeList
+              height={height ?? overflowHeight}
+              width={width}
+              itemData={data}
+              itemSize={rowHeight}
+              itemCount={data.length}
+              outerElementType={virtualizedOuterElement({
+                className: preClasses,
+              })}
+              innerElementType={virtualizedInnerElement({
+                className: preClasses,
+                onKeyDown,
+              })}>
+              {ListRow}
+            </FixedSizeList>
+          )}
+        </AutoSizer>
+      ) : (
+        <pre
+          ref={combinedRef}
+          style={optionalStyles}
+          className={preClasses}
+          tabIndex={tabIndex}>
+          {codeSnippet}
+        </pre>
+      )}
       {/*
           If the below fullScreen code renders, it actually attaches to the body because of
           EuiOverlayMask's React portal usage.
diff --git a/src/components/code/utils.tsx b/src/components/code/utils.tsx
new file mode 100644
index 000000000000..4c784074bc02
--- /dev/null
+++ b/src/components/code/utils.tsx
@@ -0,0 +1,122 @@
+/*
+ * 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, { createElement, ReactElement } from 'react';
+import { highlight, AST, RefractorNode } from 'refractor';
+import classNames from 'classnames';
+
+type ExtendedRefractorNode = RefractorNode & {
+  lineStart?: number;
+  lineEnd?: number;
+};
+
+const isAstElement = (node: RefractorNode): node is AST.Element =>
+  node.hasOwnProperty('type') && node.type === 'element';
+
+const addLineData = (
+  nodes: ExtendedRefractorNode[],
+  data = { lineNumber: 1 }
+): ExtendedRefractorNode[] => {
+  return nodes.reduce<ExtendedRefractorNode[]>((result, node) => {
+    const lineStart = data.lineNumber;
+    if (node.type === 'text') {
+      if (!node.value.match(/\r\n?|\n/)) {
+        node.lineStart = lineStart;
+        node.lineEnd = lineStart;
+        result.push(node);
+      } else {
+        const lines = node.value.split(/\r\n?|\n/);
+        lines.forEach((line, i) => {
+          const num = i === 0 ? data.lineNumber : ++data.lineNumber;
+          result.push({
+            type: 'text',
+            value: i === lines.length - 1 ? line : `${line}\n`,
+            lineStart: num,
+            lineEnd: num,
+          });
+        });
+      }
+      return result;
+    }
+
+    if (node.children && node.children.length) {
+      const children = addLineData(node.children, data);
+      const first = children[0];
+      const last = children[children.length - 1];
+      const start = first.lineStart ?? lineStart;
+      const end = last.lineEnd ?? lineStart;
+      if (start !== end) {
+        children.forEach((node) => {
+          result.push(node);
+        });
+      } else {
+        node.lineStart = start;
+        node.lineEnd = end;
+        node.children = children;
+        result.push(node);
+      }
+      return result;
+    }
+
+    result.push(node);
+    return result;
+  }, []);
+};
+
+function wrapLines(nodes: ExtendedRefractorNode[]) {
+  const grouped: ExtendedRefractorNode[][] = [];
+  nodes.forEach((node) => {
+    const lineStart = node.lineStart! - 1;
+    if (grouped[lineStart]) {
+      grouped[lineStart].push(node);
+    } else {
+      grouped[lineStart] = [node];
+    }
+  });
+  const wrapped: RefractorNode[] = [];
+  grouped.forEach((node) => {
+    wrapped.push({
+      type: 'element',
+      tagName: 'span',
+      properties: {
+        className: ['euiCodeBlock__line'],
+      },
+      children: node,
+    });
+  });
+  return wrapped;
+}
+
+export const nodeToHtml = (
+  node: RefractorNode,
+  idx: number,
+  nodes: RefractorNode[],
+  depth: number = 0
+): ReactElement => {
+  const key = `node-${depth}-${idx}`;
+
+  if (isAstElement(node)) {
+    const { properties, tagName, children } = node;
+
+    return createElement(
+      tagName,
+      {
+        ...properties,
+        key,
+        className: classNames(properties.className),
+      },
+      children && children.map((el, i) => nodeToHtml(el, i, nodes, depth + 1))
+    );
+  }
+
+  return <React.Fragment key={key}>{node.value}</React.Fragment>;
+};
+
+export const highlightByLine = (children: string, language: string) => {
+  return wrapLines(addLineData(highlight(children, language)));
+};

From 2e173cf5329c09d28893626cbc34c9aed77861bf Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 15 Jul 2021 11:19:02 -0500
Subject: [PATCH 02/13] docs

---
 src-docs/src/views/code/code_example.js |   2 +-
 src-docs/src/views/code/virtualized.js  | 737 ++++++++++++++++++++++++
 2 files changed, 738 insertions(+), 1 deletion(-)
 create mode 100644 src-docs/src/views/code/virtualized.js

diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js
index 1920577954ff..6eb5ce2b0acc 100644
--- a/src-docs/src/views/code/code_example.js
+++ b/src-docs/src/views/code/code_example.js
@@ -45,7 +45,7 @@ export const CodeExample = {
         <p>
           The <strong>EuiCode</strong> and <strong>EuiCodeBlock</strong>{' '}
           components support{' '}
-          <EuiLink external href="https://github.com/wooorm/refractor#syntaxes">
+          <EuiLink external href="https://prismjs.com/#supported-languages">
             all language syntaxes
           </EuiLink>{' '}
           supported by the
diff --git a/src-docs/src/views/code/virtualized.js b/src-docs/src/views/code/virtualized.js
new file mode 100644
index 000000000000..4608c7ec84a8
--- /dev/null
+++ b/src-docs/src/views/code/virtualized.js
@@ -0,0 +1,737 @@
+import React from 'react';
+
+import { EuiCodeBlock } from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiCodeBlock language="json" overflowHeight={300} isCopyable isVirtualized>
+      {`{
+  "size": 500,
+  "sort": [
+    {
+      "@timestamp": {
+        "order": "desc",
+        "unmapped_type": "boolean"
+      }
+    }
+  ],
+  "version": true,
+  "fields": [
+    {
+      "field": "*",
+      "include_unmapped": "true"
+    },
+    {
+      "field": "@timestamp",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "aws.cloudtrail.digest.end_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "aws.cloudtrail.digest.newest_event_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "aws.cloudtrail.digest.oldest_event_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "aws.cloudtrail.digest.start_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "aws.cloudtrail.user_identity.session_context.creation_date",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "azure.auditlogs.properties.activity_datetime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "azure.enqueued_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "azure.signinlogs.properties.created_at",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "cef.extensions.agentReceiptTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "cef.extensions.deviceCustomDate1",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "cef.extensions.deviceCustomDate2",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "cef.extensions.deviceReceiptTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "cef.extensions.endTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "cef.extensions.fileCreateTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "cef.extensions.fileModificationTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "cef.extensions.flexDate1",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "cef.extensions.managerReceiptTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "cef.extensions.oldFileCreateTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "cef.extensions.oldFileModificationTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "cef.extensions.startTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "checkpoint.subs_exp",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "cisco.amp.threat_hunting.incident_end_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "cisco.amp.threat_hunting.incident_start_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "cisco.amp.timestamp_nanoseconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "crowdstrike.event.EndTimestamp",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "crowdstrike.event.IncidentEndTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "crowdstrike.event.IncidentStartTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "crowdstrike.event.ProcessEndTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "crowdstrike.event.ProcessStartTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "crowdstrike.event.StartTimestamp",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "crowdstrike.event.Timestamp",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "crowdstrike.event.UTCTimestamp",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "crowdstrike.metadata.eventCreationTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "event.created",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "event.end",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "event.ingested",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "event.start",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "file.accessed",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "file.created",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "file.ctime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "file.mtime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "file.x509.not_after",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "file.x509.not_before",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "google_workspace.admin.email.log_search_filter.end_date",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "google_workspace.admin.email.log_search_filter.start_date",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "google_workspace.admin.user.birthdate",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "gsuite.admin.email.log_search_filter.end_date",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "gsuite.admin.email.log_search_filter.start_date",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "gsuite.admin.user.birthdate",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "juniper.srx.elapsed_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "juniper.srx.epoch_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "juniper.srx.timestamp",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "kafka.block_timestamp",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "microsoft.defender_atp.lastUpdateTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "microsoft.defender_atp.resolvedTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "microsoft.m365_defender.alerts.creationTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "microsoft.m365_defender.alerts.lastUpdatedTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "microsoft.m365_defender.alerts.resolvedTime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "misp.campaign.first_seen",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "misp.campaign.last_seen",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "misp.intrusion_set.first_seen",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "misp.intrusion_set.last_seen",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "misp.observed_data.first_observed",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "misp.observed_data.last_observed",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "misp.report.published",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "misp.threat_indicator.valid_from",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "misp.threat_indicator.valid_until",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.collection_time_milliseconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.exporter.timestamp",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.flow_end_microseconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.flow_end_milliseconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.flow_end_nanoseconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.flow_end_seconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.flow_start_microseconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.flow_start_milliseconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.flow_start_nanoseconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.flow_start_seconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.max_export_seconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.max_flow_end_microseconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.max_flow_end_milliseconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.max_flow_end_nanoseconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.max_flow_end_seconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.min_export_seconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.min_flow_start_microseconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.min_flow_start_milliseconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.min_flow_start_nanoseconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.min_flow_start_seconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.monitoring_interval_end_milli_seconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.monitoring_interval_start_milli_seconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.observation_time_microseconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.observation_time_milliseconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.observation_time_nanoseconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.observation_time_seconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "netflow.system_init_time_milliseconds",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "package.installed",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "pensando.dfw.timestamp",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "postgresql.log.session_start_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "process.parent.start",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "process.start",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "rsa.internal.lc_ctime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "rsa.internal.time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "rsa.time.effective_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "rsa.time.endtime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "rsa.time.event_queue_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "rsa.time.event_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "rsa.time.expire_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "rsa.time.recorded_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "rsa.time.stamp",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "rsa.time.starttime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "snyk.vulnerabilities.disclosure_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "snyk.vulnerabilities.introduced_date",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "snyk.vulnerabilities.publication_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "sophos.xg.date",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "sophos.xg.eventtime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "sophos.xg.start_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "sophos.xg.starttime",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "sophos.xg.timestamp",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "suricata.eve.flow.start",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "suricata.eve.tls.notafter",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "suricata.eve.tls.notbefore",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "threatintel.anomali.modified",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "threatintel.anomali.valid_from",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "threatintel.indicator.last_seen",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "threatintel.misp.attribute.timestamp",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "threatintel.misp.date",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "threatintel.misp.publish_timestamp",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "threatintel.misp.timestamp",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "tls.client.not_after",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "tls.client.not_before",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "tls.client.x509.not_after",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "tls.client.x509.not_before",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "tls.server.not_after",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "tls.server.not_before",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "tls.server.x509.not_after",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "tls.server.x509.not_before",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "x509.not_after",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "x509.not_before",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zeek.kerberos.valid.from",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zeek.kerberos.valid.until",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zeek.ocsp.revoke.time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zeek.ocsp.update.next",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zeek.ocsp.update.this",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zeek.pe.compile_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zeek.smb_files.times.accessed",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zeek.smb_files.times.changed",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zeek.smb_files.times.created",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zeek.smb_files.times.modified",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zeek.smtp.date",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zeek.snmp.up_since",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zeek.x509.certificate.valid.from",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zeek.x509.certificate.valid.until",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zoom.meeting.start_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zoom.participant.join_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zoom.participant.leave_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zoom.phone.answer_start_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zoom.phone.call_end_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zoom.phone.connected_start_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zoom.phone.date_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zoom.phone.ringing_start_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zoom.recording.recording_file.recording_end",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zoom.recording.recording_file.recording_start",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zoom.recording.start_time",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zoom.timestamp",
+      "format": "strict_date_optional_time"
+    },
+    {
+      "field": "zoom.webinar.start_time",
+      "format": "strict_date_optional_time"
+    }
+  ],
+  "aggs": {
+    "2": {
+      "date_histogram": {
+        "field": "@timestamp",
+        "fixed_interval": "30s",
+        "time_zone": "America/Chicago",
+        "min_doc_count": 1
+      }
+    }
+  },
+  "script_fields": {},
+  "stored_fields": [
+    "*"
+  ],
+  "runtime_mappings": {},
+  "_source": false,
+  "query": {
+    "bool": {
+      "must": [],
+      "filter": [
+        {
+          "match_all": {}
+        },
+        {
+          "range": {
+            "@timestamp": {
+              "gte": "2021-07-13T20:40:15.011Z",
+              "lte": "2021-07-13T20:55:15.011Z",
+              "format": "strict_date_optional_time"
+            }
+          }
+        }
+      ],
+      "should": [],
+      "must_not": []
+    }
+  },
+  "highlight": {
+    "pre_tags": [
+      "@kibana-highlighted-field@"
+    ],
+    "post_tags": [
+      "@/kibana-highlighted-field@"
+    ],
+    "fields": {
+      "*": {}
+    },
+    "fragment_size": 2147483647
+  }
+}`}
+    </EuiCodeBlock>
+  </div>
+);

From f87b28da0fb0f5f5b94af9dc48586fa82b5a3b9f Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 15 Jul 2021 11:26:16 -0500
Subject: [PATCH 03/13] test

---
 .../__snapshots__/code_block.test.tsx.snap    | 27 +++++++++++++++++++
 src/components/code/code_block.test.tsx       | 12 +++++++++
 2 files changed, 39 insertions(+)

diff --git a/src/components/code/__snapshots__/code_block.test.tsx.snap b/src/components/code/__snapshots__/code_block.test.tsx.snap
index b60f7a386dff..1068fdb52b5e 100644
--- a/src/components/code/__snapshots__/code_block.test.tsx.snap
+++ b/src/components/code/__snapshots__/code_block.test.tsx.snap
@@ -1,5 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiCodeBlock dynamic content renders a virtualized code block 1`] = `
+<div
+  class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--hasControls prismjs language-text testClass1 testClass2"
+  style="max-height:50%"
+>
+  <div
+    style="overflow:visible;height:0;width:0"
+  />
+  <div
+    class="euiCodeBlock__controls"
+  >
+    <button
+      aria-label="Expand"
+      class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiCodeBlock__fullScreenButton"
+      type="button"
+    >
+      <span
+        aria-hidden="true"
+        class="euiButtonIcon__icon"
+        color="inherit"
+        data-euiicon-type="fullScreen"
+      />
+    </button>
+  </div>
+</div>
+`;
+
 exports[`EuiCodeBlock dynamic content updates DOM when input changes 1`] = `
 "<div>
   <div class=\\"euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge prismjs language-javascript\\">
diff --git a/src/components/code/code_block.test.tsx b/src/components/code/code_block.test.tsx
index 5af6ebfd1e1f..d867afe75417 100644
--- a/src/components/code/code_block.test.tsx
+++ b/src/components/code/code_block.test.tsx
@@ -154,5 +154,17 @@ describe('EuiCodeBlock', () => {
         'const value = "hello"'
       );
     });
+
+    test('renders a virtualized code block', () => {
+      const component = render(
+        <EuiCodeBlock
+          isVirtualized={true}
+          overflowHeight="50%"
+          {...requiredProps}>
+          {code}
+        </EuiCodeBlock>
+      );
+      expect(component).toMatchSnapshot();
+    });
   });
 });

From f59d6dccc2e68bece061fe67ebeeb927287fc2b1 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 15 Jul 2021 11:26:26 -0500
Subject: [PATCH 04/13] clean up

---
 src-docs/src/views/code/code_block_pre.js |  2 +-
 src/components/code/_code_block.tsx       | 15 +++++++--------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src-docs/src/views/code/code_block_pre.js b/src-docs/src/views/code/code_block_pre.js
index e32c430afd5e..4df2aad65b01 100644
--- a/src-docs/src/views/code/code_block_pre.js
+++ b/src-docs/src/views/code/code_block_pre.js
@@ -6,7 +6,7 @@ export default () => (
   <div>
     <EuiCodeBlock
       language="jsx"
-      fontSize="s"
+      fontSize="m"
       paddingSize="m"
       color="dark"
       overflowHeight={300}
diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx
index 92022c035d3a..f1e71790f550 100644
--- a/src/components/code/_code_block.tsx
+++ b/src/components/code/_code_block.tsx
@@ -11,6 +11,7 @@ import React, {
   HTMLAttributes,
   FunctionComponent,
   KeyboardEvent,
+  ReactElement,
   ReactNode,
   memo,
   forwardRef,
@@ -186,7 +187,7 @@ export const EuiCodeBlockImpl: FunctionComponent<EuiCodeBlockImplProps> = ({
   ]);
 
   // Used by `pre` when `isVirtualized=false` or `children` is not parsable (`isVirtualized=false`)
-  const content: React.ReactElement[] | ReactNode = useMemo(() => {
+  const content: ReactElement[] | ReactNode = useMemo(() => {
     if (!Array.isArray(data) || data.length < 1) {
       return children;
     }
@@ -337,13 +338,11 @@ export const EuiCodeBlockImpl: FunctionComponent<EuiCodeBlockImplProps> = ({
     return codeBlockControls;
   };
 
-  const ListRow = React.memo(
-    ({ data, index, style }: ListChildComponentProps) => {
-      const row = data[index];
-      row.properties.style = style;
-      return nodeToHtml(row, index, data, 0);
-    }
-  );
+  const ListRow = memo(({ data, index, style }: ListChildComponentProps) => {
+    const row = data[index];
+    row.properties.style = style;
+    return nodeToHtml(row, index, data, 0);
+  });
 
   const getFullScreenDisplay = (codeBlockControls?: JSX.Element) => {
     let fullScreenDisplay;

From 3a6d01b34cea062ce199f134529f35044a2c3b23 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 15 Jul 2021 11:32:46 -0500
Subject: [PATCH 05/13] listrow

---
 src/components/code/_code_block.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx
index f1e71790f550..b5e52bf1e185 100644
--- a/src/components/code/_code_block.tsx
+++ b/src/components/code/_code_block.tsx
@@ -56,6 +56,12 @@ const virtualizedInnerElement = ({
     ))
   );
 
+const ListRow = ({ data, index, style }: ListChildComponentProps) => {
+  const row = data[index];
+  row.properties.style = style;
+  return nodeToHtml(row, index, data, 0);
+};
+
 const SUPPORTED_LANGUAGES = listLanguages();
 const DEFAULT_LANGUAGE = 'text';
 
@@ -338,12 +344,6 @@ export const EuiCodeBlockImpl: FunctionComponent<EuiCodeBlockImplProps> = ({
     return codeBlockControls;
   };
 
-  const ListRow = memo(({ data, index, style }: ListChildComponentProps) => {
-    const row = data[index];
-    row.properties.style = style;
-    return nodeToHtml(row, index, data, 0);
-  });
-
   const getFullScreenDisplay = (codeBlockControls?: JSX.Element) => {
     let fullScreenDisplay;
 

From 1c9cb271120a8a4a8f6b924e67dfb98475dd0e70 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 15 Jul 2021 11:36:32 -0500
Subject: [PATCH 06/13] CL

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2aa11661d974..59bb855ea3d3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Refactored `EuiFlyout` types ([#4940](https://github.com/elastic/eui/pull/4940))
 - Updated `pause` icon ([#4947](https://github.com/elastic/eui/pull/4947))
+- Added optional virtualized line rendering to `EuiCodeBlock` ([#4952](https://github.com/elastic/eui/pull/4952))
 
 **Bug fixes**
 

From 9be814c4a41180401f888f0ec0f4d353cc86a702 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 15 Jul 2021 11:42:35 -0500
Subject: [PATCH 07/13] comment

---
 src/components/code/_code_block.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx
index b5e52bf1e185..f786ac5a5e16 100644
--- a/src/components/code/_code_block.tsx
+++ b/src/components/code/_code_block.tsx
@@ -95,6 +95,10 @@ export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
 // overflowHeight is required when using virtualization
 type VirtualizedOptionProps = ExclusiveUnion<
   {
+    /**
+     * Renders code block lines virtually.
+     * Useful for improving load times of large code blocks.
+     */
     isVirtualized: true;
     /**
      * Sets the maximum container height.

From 83cb992b9909a390b1af69c979bdb2f60b1c08ea Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 15 Jul 2021 16:10:15 -0500
Subject: [PATCH 08/13] comment

---
 src/components/code/_code_block.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx
index f786ac5a5e16..95f7e045b341 100644
--- a/src/components/code/_code_block.tsx
+++ b/src/components/code/_code_block.tsx
@@ -98,6 +98,7 @@ type VirtualizedOptionProps = ExclusiveUnion<
     /**
      * Renders code block lines virtually.
      * Useful for improving load times of large code blocks.
+     * `overflowHeight` is required when using this configuration.
      */
     isVirtualized: true;
     /**

From 9efe2e0b6ee633399a5a7de93b0b0d5bd7f5680a Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 16 Jul 2021 09:19:44 -0500
Subject: [PATCH 09/13] sample json

---
 src-docs/src/views/code/virtualized.js | 1525 +++++++++++++-----------
 1 file changed, 806 insertions(+), 719 deletions(-)

diff --git a/src-docs/src/views/code/virtualized.js b/src-docs/src/views/code/virtualized.js
index 4608c7ec84a8..f5a25a93c20b 100644
--- a/src-docs/src/views/code/virtualized.js
+++ b/src-docs/src/views/code/virtualized.js
@@ -6,731 +6,818 @@ export default () => (
   <div>
     <EuiCodeBlock language="json" overflowHeight={300} isCopyable isVirtualized>
       {`{
-  "size": 500,
-  "sort": [
-    {
-      "@timestamp": {
-        "order": "desc",
-        "unmapped_type": "boolean"
-      }
-    }
-  ],
-  "version": true,
-  "fields": [
-    {
-      "field": "*",
-      "include_unmapped": "true"
-    },
-    {
-      "field": "@timestamp",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "aws.cloudtrail.digest.end_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "aws.cloudtrail.digest.newest_event_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "aws.cloudtrail.digest.oldest_event_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "aws.cloudtrail.digest.start_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "aws.cloudtrail.user_identity.session_context.creation_date",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "azure.auditlogs.properties.activity_datetime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "azure.enqueued_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "azure.signinlogs.properties.created_at",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "cef.extensions.agentReceiptTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "cef.extensions.deviceCustomDate1",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "cef.extensions.deviceCustomDate2",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "cef.extensions.deviceReceiptTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "cef.extensions.endTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "cef.extensions.fileCreateTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "cef.extensions.fileModificationTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "cef.extensions.flexDate1",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "cef.extensions.managerReceiptTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "cef.extensions.oldFileCreateTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "cef.extensions.oldFileModificationTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "cef.extensions.startTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "checkpoint.subs_exp",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "cisco.amp.threat_hunting.incident_end_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "cisco.amp.threat_hunting.incident_start_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "cisco.amp.timestamp_nanoseconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "crowdstrike.event.EndTimestamp",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "crowdstrike.event.IncidentEndTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "crowdstrike.event.IncidentStartTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "crowdstrike.event.ProcessEndTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "crowdstrike.event.ProcessStartTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "crowdstrike.event.StartTimestamp",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "crowdstrike.event.Timestamp",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "crowdstrike.event.UTCTimestamp",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "crowdstrike.metadata.eventCreationTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "event.created",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "event.end",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "event.ingested",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "event.start",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "file.accessed",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "file.created",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "file.ctime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "file.mtime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "file.x509.not_after",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "file.x509.not_before",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "google_workspace.admin.email.log_search_filter.end_date",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "google_workspace.admin.email.log_search_filter.start_date",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "google_workspace.admin.user.birthdate",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "gsuite.admin.email.log_search_filter.end_date",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "gsuite.admin.email.log_search_filter.start_date",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "gsuite.admin.user.birthdate",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "juniper.srx.elapsed_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "juniper.srx.epoch_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "juniper.srx.timestamp",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "kafka.block_timestamp",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "microsoft.defender_atp.lastUpdateTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "microsoft.defender_atp.resolvedTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "microsoft.m365_defender.alerts.creationTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "microsoft.m365_defender.alerts.lastUpdatedTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "microsoft.m365_defender.alerts.resolvedTime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "misp.campaign.first_seen",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "misp.campaign.last_seen",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "misp.intrusion_set.first_seen",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "misp.intrusion_set.last_seen",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "misp.observed_data.first_observed",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "misp.observed_data.last_observed",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "misp.report.published",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "misp.threat_indicator.valid_from",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "misp.threat_indicator.valid_until",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.collection_time_milliseconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.exporter.timestamp",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.flow_end_microseconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.flow_end_milliseconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.flow_end_nanoseconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.flow_end_seconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.flow_start_microseconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.flow_start_milliseconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.flow_start_nanoseconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.flow_start_seconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.max_export_seconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.max_flow_end_microseconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.max_flow_end_milliseconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.max_flow_end_nanoseconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.max_flow_end_seconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.min_export_seconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.min_flow_start_microseconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.min_flow_start_milliseconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.min_flow_start_nanoseconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.min_flow_start_seconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.monitoring_interval_end_milli_seconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.monitoring_interval_start_milli_seconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.observation_time_microseconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.observation_time_milliseconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.observation_time_nanoseconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.observation_time_seconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "netflow.system_init_time_milliseconds",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "package.installed",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "pensando.dfw.timestamp",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "postgresql.log.session_start_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "process.parent.start",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "process.start",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "rsa.internal.lc_ctime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "rsa.internal.time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "rsa.time.effective_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "rsa.time.endtime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "rsa.time.event_queue_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "rsa.time.event_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "rsa.time.expire_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "rsa.time.recorded_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "rsa.time.stamp",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "rsa.time.starttime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "snyk.vulnerabilities.disclosure_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "snyk.vulnerabilities.introduced_date",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "snyk.vulnerabilities.publication_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "sophos.xg.date",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "sophos.xg.eventtime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "sophos.xg.start_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "sophos.xg.starttime",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "sophos.xg.timestamp",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "suricata.eve.flow.start",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "suricata.eve.tls.notafter",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "suricata.eve.tls.notbefore",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "threatintel.anomali.modified",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "threatintel.anomali.valid_from",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "threatintel.indicator.last_seen",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "threatintel.misp.attribute.timestamp",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "threatintel.misp.date",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "threatintel.misp.publish_timestamp",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "threatintel.misp.timestamp",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "tls.client.not_after",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "tls.client.not_before",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "tls.client.x509.not_after",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "tls.client.x509.not_before",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "tls.server.not_after",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "tls.server.not_before",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "tls.server.x509.not_after",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "tls.server.x509.not_before",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "x509.not_after",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "x509.not_before",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zeek.kerberos.valid.from",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zeek.kerberos.valid.until",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zeek.ocsp.revoke.time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zeek.ocsp.update.next",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zeek.ocsp.update.this",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zeek.pe.compile_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zeek.smb_files.times.accessed",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zeek.smb_files.times.changed",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zeek.smb_files.times.created",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zeek.smb_files.times.modified",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zeek.smtp.date",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zeek.snmp.up_since",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zeek.x509.certificate.valid.from",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zeek.x509.certificate.valid.until",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zoom.meeting.start_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zoom.participant.join_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zoom.participant.leave_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zoom.phone.answer_start_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zoom.phone.call_end_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zoom.phone.connected_start_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zoom.phone.date_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zoom.phone.ringing_start_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zoom.recording.recording_file.recording_end",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zoom.recording.recording_file.recording_start",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zoom.recording.start_time",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zoom.timestamp",
-      "format": "strict_date_optional_time"
-    },
-    {
-      "field": "zoom.webinar.start_time",
-      "format": "strict_date_optional_time"
-    }
-  ],
-  "aggs": {
-    "2": {
-      "date_histogram": {
-        "field": "@timestamp",
-        "fixed_interval": "30s",
-        "time_zone": "America/Chicago",
-        "min_doc_count": 1
-      }
-    }
-  },
-  "script_fields": {},
-  "stored_fields": [
-    "*"
-  ],
-  "runtime_mappings": {},
-  "_source": false,
-  "query": {
-    "bool": {
-      "must": [],
-      "filter": [
+  "id": "1",
+  "rawResponse": {
+    "took": 19,
+    "timed_out": false,
+    "_shards": {
+      "total": 1,
+      "successful": 1,
+      "skipped": 0,
+      "failed": 0
+    },
+    "hits": {
+      "total": 7,
+      "max_score": null,
+      "hits": [
         {
-          "match_all": {}
+          "_index": "kibana_sample_data_flights",
+          "_id": "i5-sr3oB9JvwH6mY-m2Q",
+          "_version": 1,
+          "_score": null,
+          "fields": {
+            "Origin": [
+              "Wichita Mid Continent Airport"
+            ],
+            "OriginLocation": [
+              {
+                "coordinates": [
+                  -97.43309784,
+                  37.64989853
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightNum": [
+              "Q4UQIF3"
+            ],
+            "DestLocation": [
+              {
+                "coordinates": [
+                  8.54917,
+                  47.464699
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightDelay": [
+              true
+            ],
+            "DistanceMiles": [
+              5013.5835
+            ],
+            "FlightTimeMin": [
+              822.3817
+            ],
+            "OriginWeather": [
+              "Cloudy"
+            ],
+            "dayOfWeek": [
+              4
+            ],
+            "AvgTicketPrice": [
+              276.2003
+            ],
+            "Carrier": [
+              "JetBeats"
+            ],
+            "FlightDelayMin": [
+              150
+            ],
+            "OriginRegion": [
+              "US-KS"
+            ],
+            "DestAirportID": [
+              "ZRH"
+            ],
+            "FlightDelayType": [
+              "Carrier Delay"
+            ],
+            "hour_of_day": [
+              14
+            ],
+            "timestamp": [
+              "2021-07-16T14:15:29.000Z"
+            ],
+            "Dest": [
+              "Zurich Airport"
+            ],
+            "FlightTimeHour": [
+              "13.706362235285443"
+            ],
+            "Cancelled": [
+              false
+            ],
+            "DistanceKilometers": [
+              8068.5806
+            ],
+            "OriginCityName": [
+              "Wichita"
+            ],
+            "DestWeather": [
+              "Rain"
+            ],
+            "OriginCountry": [
+              "US"
+            ],
+            "DestCountry": [
+              "CH"
+            ],
+            "DestRegion": [
+              "CH-ZH"
+            ],
+            "OriginAirportID": [
+              "ICT"
+            ],
+            "DestCityName": [
+              "Zurich"
+            ]
+          },
+          "sort": [
+            1626444929000
+          ]
         },
         {
-          "range": {
-            "@timestamp": {
-              "gte": "2021-07-13T20:40:15.011Z",
-              "lte": "2021-07-13T20:55:15.011Z",
-              "format": "strict_date_optional_time"
-            }
-          }
+          "_index": "kibana_sample_data_flights",
+          "_id": "AZ-sr3oB9JvwH6mY-m2P",
+          "_version": 1,
+          "_score": null,
+          "fields": {
+            "Origin": [
+              "Turin Airport"
+            ],
+            "OriginLocation": [
+              {
+                "coordinates": [
+                  7.64963,
+                  45.200802
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightNum": [
+              "WR15PZZ"
+            ],
+            "DestLocation": [
+              {
+                "coordinates": [
+                  20.96710014,
+                  52.16569901
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightDelay": [
+              false
+            ],
+            "DistanceMiles": [
+              774.4176
+            ],
+            "FlightTimeMin": [
+              95.86956
+            ],
+            "OriginWeather": [
+              "Clear"
+            ],
+            "dayOfWeek": [
+              4
+            ],
+            "AvgTicketPrice": [
+              360.27106
+            ],
+            "Carrier": [
+              "Kibana Airlines"
+            ],
+            "FlightDelayMin": [
+              0
+            ],
+            "OriginRegion": [
+              "IT-21"
+            ],
+            "DestAirportID": [
+              "WAW"
+            ],
+            "FlightDelayType": [
+              "No Delay"
+            ],
+            "hour_of_day": [
+              14
+            ],
+            "timestamp": [
+              "2021-07-16T14:14:06.000Z"
+            ],
+            "Dest": [
+              "Warsaw Chopin Airport"
+            ],
+            "FlightTimeHour": [
+              "1.597826006729792"
+            ],
+            "Cancelled": [
+              false
+            ],
+            "DistanceKilometers": [
+              1246.3043
+            ],
+            "OriginCityName": [
+              "Torino"
+            ],
+            "DestWeather": [
+              "Thunder & Lightning"
+            ],
+            "OriginCountry": [
+              "IT"
+            ],
+            "DestCountry": [
+              "PL"
+            ],
+            "DestRegion": [
+              "PL-MZ"
+            ],
+            "OriginAirportID": [
+              "TO11"
+            ],
+            "DestCityName": [
+              "Warsaw"
+            ]
+          },
+          "sort": [
+            1626444846000
+          ]
+        },
+        {
+          "_index": "kibana_sample_data_flights",
+          "_id": "LJ-sr3oB9JvwH6mY-m6Q",
+          "_version": 1,
+          "_score": null,
+          "fields": {
+            "Origin": [
+              "Chhatrapati Shivaji International Airport"
+            ],
+            "OriginLocation": [
+              {
+                "coordinates": [
+                  72.86789703,
+                  19.08869934
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightNum": [
+              "VZNTLIZ"
+            ],
+            "DestLocation": [
+              {
+                "coordinates": [
+                  33.46390152,
+                  68.15180206
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightDelay": [
+              false
+            ],
+            "DistanceMiles": [
+              3791.431
+            ],
+            "FlightTimeMin": [
+              305.08582
+            ],
+            "OriginWeather": [
+              "Cloudy"
+            ],
+            "dayOfWeek": [
+              4
+            ],
+            "AvgTicketPrice": [
+              845.4707
+            ],
+            "Carrier": [
+              "JetBeats"
+            ],
+            "FlightDelayMin": [
+              0
+            ],
+            "OriginRegion": [
+              "SE-BD"
+            ],
+            "DestAirportID": [
+              "XLMO"
+            ],
+            "FlightDelayType": [
+              "No Delay"
+            ],
+            "hour_of_day": [
+              14
+            ],
+            "timestamp": [
+              "2021-07-16T14:05:44.000Z"
+            ],
+            "Dest": [
+              "Olenya Air Base"
+            ],
+            "FlightTimeHour": [
+              "5.084763808440013"
+            ],
+            "Cancelled": [
+              false
+            ],
+            "DistanceKilometers": [
+              6101.717
+            ],
+            "OriginCityName": [
+              "Mumbai"
+            ],
+            "DestWeather": [
+              "Heavy Fog"
+            ],
+            "OriginCountry": [
+              "IN"
+            ],
+            "DestCountry": [
+              "RU"
+            ],
+            "DestRegion": [
+              "RU-MUR"
+            ],
+            "OriginAirportID": [
+              "BOM"
+            ],
+            "DestCityName": [
+              "Olenegorsk"
+            ]
+          },
+          "sort": [
+            1626444344000
+          ]
+        },
+        {
+          "_index": "kibana_sample_data_flights",
+          "_id": "Hp-sr3oB9JvwH6mY-m2P",
+          "_version": 1,
+          "_score": null,
+          "fields": {
+            "Origin": [
+              "Buffalo Niagara International Airport"
+            ],
+            "OriginLocation": [
+              {
+                "coordinates": [
+                  -78.73220062,
+                  42.94049835
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightNum": [
+              "QAXVRPQ"
+            ],
+            "DestLocation": [
+              {
+                "coordinates": [
+                  -78.3575,
+                  -0.129166667
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightDelay": [
+              false
+            ],
+            "DistanceMiles": [
+              2964.2756
+            ],
+            "FlightTimeMin": [
+              227.16853
+            ],
+            "OriginWeather": [
+              "Sunny"
+            ],
+            "dayOfWeek": [
+              4
+            ],
+            "AvgTicketPrice": [
+              719.76935
+            ],
+            "Carrier": [
+              "JetBeats"
+            ],
+            "FlightDelayMin": [
+              0
+            ],
+            "OriginRegion": [
+              "US-NY"
+            ],
+            "DestAirportID": [
+              "UIO"
+            ],
+            "FlightDelayType": [
+              "No Delay"
+            ],
+            "hour_of_day": [
+              13
+            ],
+            "timestamp": [
+              "2021-07-16T13:57:30.000Z"
+            ],
+            "Dest": [
+              "Mariscal Sucre International Airport"
+            ],
+            "FlightTimeHour": [
+              "3.7861423240197563"
+            ],
+            "Cancelled": [
+              false
+            ],
+            "DistanceKilometers": [
+              4770.5396
+            ],
+            "OriginCityName": [
+              "Buffalo"
+            ],
+            "DestWeather": [
+              "Clear"
+            ],
+            "OriginCountry": [
+              "US"
+            ],
+            "DestCountry": [
+              "EC"
+            ],
+            "DestRegion": [
+              "EC-P"
+            ],
+            "OriginAirportID": [
+              "BUF"
+            ],
+            "DestCityName": [
+              "Quito"
+            ]
+          },
+          "sort": [
+            1626443850000
+          ]
+        },
+        {
+          "_index": "kibana_sample_data_flights",
+          "_id": "U5-sr3oB9JvwH6mY-m2Q",
+          "_version": 1,
+          "_score": null,
+          "fields": {
+            "Origin": [
+              "Dubai International Airport"
+            ],
+            "OriginLocation": [
+              {
+                "coordinates": [
+                  55.36439896,
+                  25.25279999
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightNum": [
+              "TJQKCKN"
+            ],
+            "DestLocation": [
+              {
+                "coordinates": [
+                  -73.74079895,
+                  45.47060013
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightDelay": [
+              false
+            ],
+            "DistanceMiles": [
+              6611.2646
+            ],
+            "FlightTimeMin": [
+              709.31995
+            ],
+            "OriginWeather": [
+              "Rain"
+            ],
+            "dayOfWeek": [
+              4
+            ],
+            "AvgTicketPrice": [
+              756.61444
+            ],
+            "Carrier": [
+              "ES-Air"
+            ],
+            "FlightDelayMin": [
+              0
+            ],
+            "OriginRegion": [
+              "SE-BD"
+            ],
+            "DestAirportID": [
+              "YUL"
+            ],
+            "FlightDelayType": [
+              "No Delay"
+            ],
+            "hour_of_day": [
+              13
+            ],
+            "timestamp": [
+              "2021-07-16T13:51:52.000Z"
+            ],
+            "Dest": [
+              "Montreal / Pierre Elliott Trudeau International Airport"
+            ],
+            "FlightTimeHour": [
+              "11.821998598483413"
+            ],
+            "Cancelled": [
+              false
+            ],
+            "DistanceKilometers": [
+              10639.799
+            ],
+            "OriginCityName": [
+              "Dubai"
+            ],
+            "DestWeather": [
+              "Clear"
+            ],
+            "OriginCountry": [
+              "AE"
+            ],
+            "DestCountry": [
+              "CA"
+            ],
+            "DestRegion": [
+              "CA-QC"
+            ],
+            "OriginAirportID": [
+              "DXB"
+            ],
+            "DestCityName": [
+              "Montreal"
+            ]
+          },
+          "sort": [
+            1626443512000
+          ]
+        },
+        {
+          "_index": "kibana_sample_data_flights",
+          "_id": "TJ-sr3oB9JvwH6mY-m2Q",
+          "_version": 1,
+          "_score": null,
+          "fields": {
+            "Origin": [
+              "Jorge Chavez International Airport"
+            ],
+            "OriginLocation": [
+              {
+                "coordinates": [
+                  -77.114304,
+                  -12.0219
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightNum": [
+              "8B6BGMO"
+            ],
+            "DestLocation": [
+              {
+                "coordinates": [
+                  128.445007,
+                  51.169997
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightDelay": [
+              true
+            ],
+            "DistanceMiles": [
+              9375.942
+            ],
+            "FlightTimeMin": [
+              824.16406
+            ],
+            "OriginWeather": [
+              "Cloudy"
+            ],
+            "dayOfWeek": [
+              4
+            ],
+            "AvgTicketPrice": [
+              463.068
+            ],
+            "Carrier": [
+              "Logstash Airways"
+            ],
+            "FlightDelayMin": [
+              30
+            ],
+            "OriginRegion": [
+              "SE-BD"
+            ],
+            "DestAirportID": [
+              "XHBU"
+            ],
+            "FlightDelayType": [
+              "Late Aircraft Delay"
+            ],
+            "hour_of_day": [
+              13
+            ],
+            "timestamp": [
+              "2021-07-16T13:50:55.000Z"
+            ],
+            "Dest": [
+              "Ukrainka Air Base"
+            ],
+            "FlightTimeHour": [
+              "13.736067768266615"
+            ],
+            "Cancelled": [
+              false
+            ],
+            "DistanceKilometers": [
+              15089.117
+            ],
+            "OriginCityName": [
+              "Lima"
+            ],
+            "DestWeather": [
+              "Clear"
+            ],
+            "OriginCountry": [
+              "PE"
+            ],
+            "DestCountry": [
+              "RU"
+            ],
+            "DestRegion": [
+              "RU-AMU"
+            ],
+            "OriginAirportID": [
+              "LIM"
+            ],
+            "DestCityName": [
+              "Belogorsk"
+            ]
+          },
+          "sort": [
+            1626443455000
+          ]
+        },
+        {
+          "_index": "kibana_sample_data_flights",
+          "_id": "3J-sr3oB9JvwH6mY-m2Q",
+          "_version": 1,
+          "_score": null,
+          "fields": {
+            "Origin": [
+              "Sydney Kingsford Smith International Airport"
+            ],
+            "OriginLocation": [
+              {
+                "coordinates": [
+                  151.177002,
+                  -33.94609833
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightNum": [
+              "PASAN8N"
+            ],
+            "DestLocation": [
+              {
+                "coordinates": [
+                  8.54917,
+                  47.464699
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightDelay": [
+              false
+            ],
+            "DistanceMiles": [
+              10293.209
+            ],
+            "FlightTimeMin": [
+              1380.4429
+            ],
+            "OriginWeather": [
+              "Sunny"
+            ],
+            "dayOfWeek": [
+              4
+            ],
+            "AvgTicketPrice": [
+              380.29593
+            ],
+            "Carrier": [
+              "Logstash Airways"
+            ],
+            "FlightDelayMin": [
+              0
+            ],
+            "OriginRegion": [
+              "SE-BD"
+            ],
+            "DestAirportID": [
+              "ZRH"
+            ],
+            "FlightDelayType": [
+              "No Delay"
+            ],
+            "hour_of_day": [
+              13
+            ],
+            "timestamp": [
+              "2021-07-16T13:49:20.000Z"
+            ],
+            "Dest": [
+              "Zurich Airport"
+            ],
+            "FlightTimeHour": [
+              "23.007380215402044"
+            ],
+            "Cancelled": [
+              false
+            ],
+            "DistanceKilometers": [
+              16565.314
+            ],
+            "OriginCityName": [
+              "Sydney"
+            ],
+            "DestWeather": [
+              "Rain"
+            ],
+            "OriginCountry": [
+              "AU"
+            ],
+            "DestCountry": [
+              "CH"
+            ],
+            "DestRegion": [
+              "CH-ZH"
+            ],
+            "OriginAirportID": [
+              "SYD"
+            ],
+            "DestCityName": [
+              "Zurich"
+            ]
+          },
+          "sort": [
+            1626443360000
+          ]
         }
-      ],
-      "should": [],
-      "must_not": []
+      ]
+    },
+    "aggregations": {
+      "2": {
+        "buckets": [
+          {
+            "key_as_string": "2021-07-16T08:49:00.000-05:00",
+            "key": 1626443340000,
+            "doc_count": 1
+          },
+          {
+            "key_as_string": "2021-07-16T08:50:30.000-05:00",
+            "key": 1626443430000,
+            "doc_count": 1
+          },
+          {
+            "key_as_string": "2021-07-16T08:51:30.000-05:00",
+            "key": 1626443490000,
+            "doc_count": 1
+          },
+          {
+            "key_as_string": "2021-07-16T08:57:30.000-05:00",
+            "key": 1626443850000,
+            "doc_count": 1
+          },
+          {
+            "key_as_string": "2021-07-16T09:05:30.000-05:00",
+            "key": 1626444330000,
+            "doc_count": 1
+          },
+          {
+            "key_as_string": "2021-07-16T09:14:00.000-05:00",
+            "key": 1626444840000,
+            "doc_count": 1
+          },
+          {
+            "key_as_string": "2021-07-16T09:15:00.000-05:00",
+            "key": 1626444900000,
+            "doc_count": 1
+          }
+        ]
+      }
     }
   },
-  "highlight": {
-    "pre_tags": [
-      "@kibana-highlighted-field@"
-    ],
-    "post_tags": [
-      "@/kibana-highlighted-field@"
-    ],
-    "fields": {
-      "*": {}
-    },
-    "fragment_size": 2147483647
-  }
+  "isPartial": false,
+  "isRunning": false,
+  "total": 1,
+  "loaded": 1,
+  "isRestored": false
 }`}
     </EuiCodeBlock>
   </div>

From f9479673fa4a31b513f6606c8bcf8aaef7de836f Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 16 Jul 2021 15:25:24 -0500
Subject: [PATCH 10/13] height for % values

---
 src/components/code/__snapshots__/code_block.test.tsx.snap | 2 +-
 src/components/code/_code_block.tsx                        | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/code/__snapshots__/code_block.test.tsx.snap b/src/components/code/__snapshots__/code_block.test.tsx.snap
index 1068fdb52b5e..cafa673a4940 100644
--- a/src/components/code/__snapshots__/code_block.test.tsx.snap
+++ b/src/components/code/__snapshots__/code_block.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiCodeBlock dynamic content renders a virtualized code block 1`] = `
 <div
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--hasControls prismjs language-text testClass1 testClass2"
-  style="max-height:50%"
+  style="height:50%"
 >
   <div
     style="overflow:visible;height:0;width:0"
diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx
index 95f7e045b341..66f3af90c881 100644
--- a/src/components/code/_code_block.tsx
+++ b/src/components/code/_code_block.tsx
@@ -265,7 +265,9 @@ export const EuiCodeBlockImpl: FunctionComponent<EuiCodeBlockImplProps> = ({
   const optionalStyles: CSSProperties = {};
 
   if (overflowHeight) {
-    optionalStyles.maxHeight = overflowHeight;
+    const property =
+      typeof overflowHeight === 'string' ? 'height' : 'maxHeight';
+    optionalStyles[property] = overflowHeight;
   }
 
   const codeSnippet = (

From 87031453c157b963d2d46d323506c348e4f8ddf6 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 19 Jul 2021 09:12:29 -0500
Subject: [PATCH 11/13] review comments

---
 src-docs/src/views/code/code_example.js | 2 +-
 src/components/code/_code_block.scss    | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js
index 6eb5ce2b0acc..cee39ce7c946 100644
--- a/src-docs/src/views/code/code_example.js
+++ b/src-docs/src/views/code/code_example.js
@@ -130,7 +130,7 @@ export const CodeExample = {
       ],
       text: (
         <p>
-          For large blocks of code, set <EuiCode>isVirtualized</EuiCode> to
+          For large blocks of code, add <EuiCode>isVirtualized</EuiCode> to
           reduce the number of rendered rows and improve load times. Note that{' '}
           <EuiCode>overflowHeight</EuiCode> is required when using this
           configuration.
diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss
index 59c77b1db394..0dc9cbc04f0b 100644
--- a/src/components/code/_code_block.scss
+++ b/src/components/code/_code_block.scss
@@ -20,6 +20,7 @@
     white-space: pre-wrap;
   }
 
+  // Necessary for virtualized code blocks to have appropriate padding
   .euiCodeBlock__pre--isVirtualized {
     position: relative;
   }

From 71a76d52c083dcec75b5103e96263723f882132a Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 22 Jul 2021 16:36:39 -0400
Subject: [PATCH 12/13] Added flyout example

---
 src-docs/src/views/code/code_example.js       |  43 +-
 src-docs/src/views/code/virtualized_flyout.js | 861 ++++++++++++++++++
 2 files changed, 882 insertions(+), 22 deletions(-)
 create mode 100644 src-docs/src/views/code/virtualized_flyout.js

diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js
index cee39ce7c946..0e93e848dba0 100644
--- a/src-docs/src/views/code/code_example.js
+++ b/src-docs/src/views/code/code_example.js
@@ -1,6 +1,5 @@
 import React from 'react';
-
-import { renderToHtml } from '../../services';
+import { Link } from 'react-router-dom';
 
 import { GuideSectionTypes } from '../../components';
 
@@ -14,12 +13,10 @@ import { codeBlockConfig, codeConfig } from './playground';
 
 import Code from './code';
 const codeSource = require('!!raw-loader!./code');
-const codeHtml = renderToHtml(Code);
 const codeSnippet = '<EuiCode>Text to be formatted</EuiCode>';
 
 import CodeBlock from './code_block';
 const codeBlockSource = require('!!raw-loader!./code_block');
-const codeBlockHtml = renderToHtml(CodeBlock);
 const codeBlockSnippet = `<EuiCodeBlock language="html" paddingSize="s" isCopyable>
 { \`<h1>Title</h1>\` }
 </EuiCodeBlock>
@@ -27,15 +24,16 @@ const codeBlockSnippet = `<EuiCodeBlock language="html" paddingSize="s" isCopyab
 
 import CodeBlockVirtualized from './virtualized';
 const codeBlockVirtualizedSource = require('!!raw-loader!./virtualized');
-const codeBlockVirtualizedHtml = renderToHtml(CodeBlockVirtualized);
 const codeBlockVirtualizedSnippet = `<EuiCodeBlock language="json" isVirtualized overflowHeight={300}>
 { \`{}\` }
 </EuiCodeBlock>
 `;
 
+import CodeBlockVirtualizedFlyout from './virtualized_flyout';
+const codeBlockVirtualizedFlyoutSource = require('!!raw-loader!./virtualized_flyout');
+
 import CodeBlockPre from './code_block_pre';
 const codeBlockPreSource = require('!!raw-loader!./code_block_pre');
-const codeBlockPreHtml = renderToHtml(CodeBlockPre);
 
 export const CodeExample = {
   title: 'Code',
@@ -75,10 +73,6 @@ export const CodeExample = {
           type: GuideSectionTypes.JS,
           code: codeSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: codeHtml,
-        },
       ],
       text: (
         <p>
@@ -98,10 +92,6 @@ export const CodeExample = {
           type: GuideSectionTypes.JS,
           code: codeBlockSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: codeBlockHtml,
-        },
       ],
       text: (
         <p>
@@ -123,10 +113,6 @@ export const CodeExample = {
           type: GuideSectionTypes.JS,
           code: codeBlockVirtualizedSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: codeBlockVirtualizedHtml,
-        },
       ],
       text: (
         <p>
@@ -141,15 +127,28 @@ export const CodeExample = {
       demo: <CodeBlockVirtualized />,
     },
     {
-      title: 'Code block and white-space',
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: codeBlockPreSource,
+          code: codeBlockVirtualizedFlyoutSource,
         },
+      ],
+      text: (
+        <p>
+          In places like <Link to="/layout/flyout">flyouts</Link>, you can use{' '}
+          <EuiCode language="tsx">{'overflowHeight="100%"'}</EuiCode> to stretch
+          the code block to fill the space. Just be sure that it&apos;s parent
+          container is also <EuiCode language="css">{'height: 100%'}</EuiCode>.
+        </p>
+      ),
+      demo: <CodeBlockVirtualizedFlyout />,
+    },
+    {
+      title: 'Code block and white-space',
+      source: [
         {
-          type: GuideSectionTypes.HTML,
-          code: codeBlockPreHtml,
+          type: GuideSectionTypes.JS,
+          code: codeBlockPreSource,
         },
       ],
       text: (
diff --git a/src-docs/src/views/code/virtualized_flyout.js b/src-docs/src/views/code/virtualized_flyout.js
new file mode 100644
index 000000000000..8b0ece97bec9
--- /dev/null
+++ b/src-docs/src/views/code/virtualized_flyout.js
@@ -0,0 +1,861 @@
+import React, { useState } from 'react';
+
+import {
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiButton,
+  EuiTitle,
+  EuiCodeBlock,
+} from '../../../../src/components';
+
+export default () => {
+  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+
+  let flyout;
+
+  if (isFlyoutVisible) {
+    flyout = (
+      <EuiFlyout
+        ownFocus
+        onClose={() => setIsFlyoutVisible(false)}
+        aria-labelledby="flyoutTitle">
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="m">
+            <h2 id="flyoutTitle">A flyout with just code</h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <div style={{ height: '100%' }}>
+          <EuiCodeBlock
+            language="json"
+            overflowHeight={'100%'}
+            isCopyable
+            isVirtualized>
+            {`{
+  "id": "1",
+  "rawResponse": {
+    "took": 19,
+    "timed_out": false,
+    "_shards": {
+      "total": 1,
+      "successful": 1,
+      "skipped": 0,
+      "failed": 0
+    },
+    "hits": {
+      "total": 7,
+      "max_score": null,
+      "hits": [
+        {
+          "_index": "kibana_sample_data_flights",
+          "_id": "i5-sr3oB9JvwH6mY-m2Q",
+          "_version": 1,
+          "_score": null,
+          "fields": {
+            "Origin": [
+              "Wichita Mid Continent Airport"
+            ],
+            "OriginLocation": [
+              {
+                "coordinates": [
+                  -97.43309784,
+                  37.64989853
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightNum": [
+              "Q4UQIF3"
+            ],
+            "DestLocation": [
+              {
+                "coordinates": [
+                  8.54917,
+                  47.464699
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightDelay": [
+              true
+            ],
+            "DistanceMiles": [
+              5013.5835
+            ],
+            "FlightTimeMin": [
+              822.3817
+            ],
+            "OriginWeather": [
+              "Cloudy"
+            ],
+            "dayOfWeek": [
+              4
+            ],
+            "AvgTicketPrice": [
+              276.2003
+            ],
+            "Carrier": [
+              "JetBeats"
+            ],
+            "FlightDelayMin": [
+              150
+            ],
+            "OriginRegion": [
+              "US-KS"
+            ],
+            "DestAirportID": [
+              "ZRH"
+            ],
+            "FlightDelayType": [
+              "Carrier Delay"
+            ],
+            "hour_of_day": [
+              14
+            ],
+            "timestamp": [
+              "2021-07-16T14:15:29.000Z"
+            ],
+            "Dest": [
+              "Zurich Airport"
+            ],
+            "FlightTimeHour": [
+              "13.706362235285443"
+            ],
+            "Cancelled": [
+              false
+            ],
+            "DistanceKilometers": [
+              8068.5806
+            ],
+            "OriginCityName": [
+              "Wichita"
+            ],
+            "DestWeather": [
+              "Rain"
+            ],
+            "OriginCountry": [
+              "US"
+            ],
+            "DestCountry": [
+              "CH"
+            ],
+            "DestRegion": [
+              "CH-ZH"
+            ],
+            "OriginAirportID": [
+              "ICT"
+            ],
+            "DestCityName": [
+              "Zurich"
+            ]
+          },
+          "sort": [
+            1626444929000
+          ]
+        },
+        {
+          "_index": "kibana_sample_data_flights",
+          "_id": "AZ-sr3oB9JvwH6mY-m2P",
+          "_version": 1,
+          "_score": null,
+          "fields": {
+            "Origin": [
+              "Turin Airport"
+            ],
+            "OriginLocation": [
+              {
+                "coordinates": [
+                  7.64963,
+                  45.200802
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightNum": [
+              "WR15PZZ"
+            ],
+            "DestLocation": [
+              {
+                "coordinates": [
+                  20.96710014,
+                  52.16569901
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightDelay": [
+              false
+            ],
+            "DistanceMiles": [
+              774.4176
+            ],
+            "FlightTimeMin": [
+              95.86956
+            ],
+            "OriginWeather": [
+              "Clear"
+            ],
+            "dayOfWeek": [
+              4
+            ],
+            "AvgTicketPrice": [
+              360.27106
+            ],
+            "Carrier": [
+              "Kibana Airlines"
+            ],
+            "FlightDelayMin": [
+              0
+            ],
+            "OriginRegion": [
+              "IT-21"
+            ],
+            "DestAirportID": [
+              "WAW"
+            ],
+            "FlightDelayType": [
+              "No Delay"
+            ],
+            "hour_of_day": [
+              14
+            ],
+            "timestamp": [
+              "2021-07-16T14:14:06.000Z"
+            ],
+            "Dest": [
+              "Warsaw Chopin Airport"
+            ],
+            "FlightTimeHour": [
+              "1.597826006729792"
+            ],
+            "Cancelled": [
+              false
+            ],
+            "DistanceKilometers": [
+              1246.3043
+            ],
+            "OriginCityName": [
+              "Torino"
+            ],
+            "DestWeather": [
+              "Thunder & Lightning"
+            ],
+            "OriginCountry": [
+              "IT"
+            ],
+            "DestCountry": [
+              "PL"
+            ],
+            "DestRegion": [
+              "PL-MZ"
+            ],
+            "OriginAirportID": [
+              "TO11"
+            ],
+            "DestCityName": [
+              "Warsaw"
+            ]
+          },
+          "sort": [
+            1626444846000
+          ]
+        },
+        {
+          "_index": "kibana_sample_data_flights",
+          "_id": "LJ-sr3oB9JvwH6mY-m6Q",
+          "_version": 1,
+          "_score": null,
+          "fields": {
+            "Origin": [
+              "Chhatrapati Shivaji International Airport"
+            ],
+            "OriginLocation": [
+              {
+                "coordinates": [
+                  72.86789703,
+                  19.08869934
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightNum": [
+              "VZNTLIZ"
+            ],
+            "DestLocation": [
+              {
+                "coordinates": [
+                  33.46390152,
+                  68.15180206
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightDelay": [
+              false
+            ],
+            "DistanceMiles": [
+              3791.431
+            ],
+            "FlightTimeMin": [
+              305.08582
+            ],
+            "OriginWeather": [
+              "Cloudy"
+            ],
+            "dayOfWeek": [
+              4
+            ],
+            "AvgTicketPrice": [
+              845.4707
+            ],
+            "Carrier": [
+              "JetBeats"
+            ],
+            "FlightDelayMin": [
+              0
+            ],
+            "OriginRegion": [
+              "SE-BD"
+            ],
+            "DestAirportID": [
+              "XLMO"
+            ],
+            "FlightDelayType": [
+              "No Delay"
+            ],
+            "hour_of_day": [
+              14
+            ],
+            "timestamp": [
+              "2021-07-16T14:05:44.000Z"
+            ],
+            "Dest": [
+              "Olenya Air Base"
+            ],
+            "FlightTimeHour": [
+              "5.084763808440013"
+            ],
+            "Cancelled": [
+              false
+            ],
+            "DistanceKilometers": [
+              6101.717
+            ],
+            "OriginCityName": [
+              "Mumbai"
+            ],
+            "DestWeather": [
+              "Heavy Fog"
+            ],
+            "OriginCountry": [
+              "IN"
+            ],
+            "DestCountry": [
+              "RU"
+            ],
+            "DestRegion": [
+              "RU-MUR"
+            ],
+            "OriginAirportID": [
+              "BOM"
+            ],
+            "DestCityName": [
+              "Olenegorsk"
+            ]
+          },
+          "sort": [
+            1626444344000
+          ]
+        },
+        {
+          "_index": "kibana_sample_data_flights",
+          "_id": "Hp-sr3oB9JvwH6mY-m2P",
+          "_version": 1,
+          "_score": null,
+          "fields": {
+            "Origin": [
+              "Buffalo Niagara International Airport"
+            ],
+            "OriginLocation": [
+              {
+                "coordinates": [
+                  -78.73220062,
+                  42.94049835
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightNum": [
+              "QAXVRPQ"
+            ],
+            "DestLocation": [
+              {
+                "coordinates": [
+                  -78.3575,
+                  -0.129166667
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightDelay": [
+              false
+            ],
+            "DistanceMiles": [
+              2964.2756
+            ],
+            "FlightTimeMin": [
+              227.16853
+            ],
+            "OriginWeather": [
+              "Sunny"
+            ],
+            "dayOfWeek": [
+              4
+            ],
+            "AvgTicketPrice": [
+              719.76935
+            ],
+            "Carrier": [
+              "JetBeats"
+            ],
+            "FlightDelayMin": [
+              0
+            ],
+            "OriginRegion": [
+              "US-NY"
+            ],
+            "DestAirportID": [
+              "UIO"
+            ],
+            "FlightDelayType": [
+              "No Delay"
+            ],
+            "hour_of_day": [
+              13
+            ],
+            "timestamp": [
+              "2021-07-16T13:57:30.000Z"
+            ],
+            "Dest": [
+              "Mariscal Sucre International Airport"
+            ],
+            "FlightTimeHour": [
+              "3.7861423240197563"
+            ],
+            "Cancelled": [
+              false
+            ],
+            "DistanceKilometers": [
+              4770.5396
+            ],
+            "OriginCityName": [
+              "Buffalo"
+            ],
+            "DestWeather": [
+              "Clear"
+            ],
+            "OriginCountry": [
+              "US"
+            ],
+            "DestCountry": [
+              "EC"
+            ],
+            "DestRegion": [
+              "EC-P"
+            ],
+            "OriginAirportID": [
+              "BUF"
+            ],
+            "DestCityName": [
+              "Quito"
+            ]
+          },
+          "sort": [
+            1626443850000
+          ]
+        },
+        {
+          "_index": "kibana_sample_data_flights",
+          "_id": "U5-sr3oB9JvwH6mY-m2Q",
+          "_version": 1,
+          "_score": null,
+          "fields": {
+            "Origin": [
+              "Dubai International Airport"
+            ],
+            "OriginLocation": [
+              {
+                "coordinates": [
+                  55.36439896,
+                  25.25279999
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightNum": [
+              "TJQKCKN"
+            ],
+            "DestLocation": [
+              {
+                "coordinates": [
+                  -73.74079895,
+                  45.47060013
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightDelay": [
+              false
+            ],
+            "DistanceMiles": [
+              6611.2646
+            ],
+            "FlightTimeMin": [
+              709.31995
+            ],
+            "OriginWeather": [
+              "Rain"
+            ],
+            "dayOfWeek": [
+              4
+            ],
+            "AvgTicketPrice": [
+              756.61444
+            ],
+            "Carrier": [
+              "ES-Air"
+            ],
+            "FlightDelayMin": [
+              0
+            ],
+            "OriginRegion": [
+              "SE-BD"
+            ],
+            "DestAirportID": [
+              "YUL"
+            ],
+            "FlightDelayType": [
+              "No Delay"
+            ],
+            "hour_of_day": [
+              13
+            ],
+            "timestamp": [
+              "2021-07-16T13:51:52.000Z"
+            ],
+            "Dest": [
+              "Montreal / Pierre Elliott Trudeau International Airport"
+            ],
+            "FlightTimeHour": [
+              "11.821998598483413"
+            ],
+            "Cancelled": [
+              false
+            ],
+            "DistanceKilometers": [
+              10639.799
+            ],
+            "OriginCityName": [
+              "Dubai"
+            ],
+            "DestWeather": [
+              "Clear"
+            ],
+            "OriginCountry": [
+              "AE"
+            ],
+            "DestCountry": [
+              "CA"
+            ],
+            "DestRegion": [
+              "CA-QC"
+            ],
+            "OriginAirportID": [
+              "DXB"
+            ],
+            "DestCityName": [
+              "Montreal"
+            ]
+          },
+          "sort": [
+            1626443512000
+          ]
+        },
+        {
+          "_index": "kibana_sample_data_flights",
+          "_id": "TJ-sr3oB9JvwH6mY-m2Q",
+          "_version": 1,
+          "_score": null,
+          "fields": {
+            "Origin": [
+              "Jorge Chavez International Airport"
+            ],
+            "OriginLocation": [
+              {
+                "coordinates": [
+                  -77.114304,
+                  -12.0219
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightNum": [
+              "8B6BGMO"
+            ],
+            "DestLocation": [
+              {
+                "coordinates": [
+                  128.445007,
+                  51.169997
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightDelay": [
+              true
+            ],
+            "DistanceMiles": [
+              9375.942
+            ],
+            "FlightTimeMin": [
+              824.16406
+            ],
+            "OriginWeather": [
+              "Cloudy"
+            ],
+            "dayOfWeek": [
+              4
+            ],
+            "AvgTicketPrice": [
+              463.068
+            ],
+            "Carrier": [
+              "Logstash Airways"
+            ],
+            "FlightDelayMin": [
+              30
+            ],
+            "OriginRegion": [
+              "SE-BD"
+            ],
+            "DestAirportID": [
+              "XHBU"
+            ],
+            "FlightDelayType": [
+              "Late Aircraft Delay"
+            ],
+            "hour_of_day": [
+              13
+            ],
+            "timestamp": [
+              "2021-07-16T13:50:55.000Z"
+            ],
+            "Dest": [
+              "Ukrainka Air Base"
+            ],
+            "FlightTimeHour": [
+              "13.736067768266615"
+            ],
+            "Cancelled": [
+              false
+            ],
+            "DistanceKilometers": [
+              15089.117
+            ],
+            "OriginCityName": [
+              "Lima"
+            ],
+            "DestWeather": [
+              "Clear"
+            ],
+            "OriginCountry": [
+              "PE"
+            ],
+            "DestCountry": [
+              "RU"
+            ],
+            "DestRegion": [
+              "RU-AMU"
+            ],
+            "OriginAirportID": [
+              "LIM"
+            ],
+            "DestCityName": [
+              "Belogorsk"
+            ]
+          },
+          "sort": [
+            1626443455000
+          ]
+        },
+        {
+          "_index": "kibana_sample_data_flights",
+          "_id": "3J-sr3oB9JvwH6mY-m2Q",
+          "_version": 1,
+          "_score": null,
+          "fields": {
+            "Origin": [
+              "Sydney Kingsford Smith International Airport"
+            ],
+            "OriginLocation": [
+              {
+                "coordinates": [
+                  151.177002,
+                  -33.94609833
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightNum": [
+              "PASAN8N"
+            ],
+            "DestLocation": [
+              {
+                "coordinates": [
+                  8.54917,
+                  47.464699
+                ],
+                "type": "Point"
+              }
+            ],
+            "FlightDelay": [
+              false
+            ],
+            "DistanceMiles": [
+              10293.209
+            ],
+            "FlightTimeMin": [
+              1380.4429
+            ],
+            "OriginWeather": [
+              "Sunny"
+            ],
+            "dayOfWeek": [
+              4
+            ],
+            "AvgTicketPrice": [
+              380.29593
+            ],
+            "Carrier": [
+              "Logstash Airways"
+            ],
+            "FlightDelayMin": [
+              0
+            ],
+            "OriginRegion": [
+              "SE-BD"
+            ],
+            "DestAirportID": [
+              "ZRH"
+            ],
+            "FlightDelayType": [
+              "No Delay"
+            ],
+            "hour_of_day": [
+              13
+            ],
+            "timestamp": [
+              "2021-07-16T13:49:20.000Z"
+            ],
+            "Dest": [
+              "Zurich Airport"
+            ],
+            "FlightTimeHour": [
+              "23.007380215402044"
+            ],
+            "Cancelled": [
+              false
+            ],
+            "DistanceKilometers": [
+              16565.314
+            ],
+            "OriginCityName": [
+              "Sydney"
+            ],
+            "DestWeather": [
+              "Rain"
+            ],
+            "OriginCountry": [
+              "AU"
+            ],
+            "DestCountry": [
+              "CH"
+            ],
+            "DestRegion": [
+              "CH-ZH"
+            ],
+            "OriginAirportID": [
+              "SYD"
+            ],
+            "DestCityName": [
+              "Zurich"
+            ]
+          },
+          "sort": [
+            1626443360000
+          ]
+        }
+      ]
+    },
+    "aggregations": {
+      "2": {
+        "buckets": [
+          {
+            "key_as_string": "2021-07-16T08:49:00.000-05:00",
+            "key": 1626443340000,
+            "doc_count": 1
+          },
+          {
+            "key_as_string": "2021-07-16T08:50:30.000-05:00",
+            "key": 1626443430000,
+            "doc_count": 1
+          },
+          {
+            "key_as_string": "2021-07-16T08:51:30.000-05:00",
+            "key": 1626443490000,
+            "doc_count": 1
+          },
+          {
+            "key_as_string": "2021-07-16T08:57:30.000-05:00",
+            "key": 1626443850000,
+            "doc_count": 1
+          },
+          {
+            "key_as_string": "2021-07-16T09:05:30.000-05:00",
+            "key": 1626444330000,
+            "doc_count": 1
+          },
+          {
+            "key_as_string": "2021-07-16T09:14:00.000-05:00",
+            "key": 1626444840000,
+            "doc_count": 1
+          },
+          {
+            "key_as_string": "2021-07-16T09:15:00.000-05:00",
+            "key": 1626444900000,
+            "doc_count": 1
+          }
+        ]
+      }
+    }
+  },
+  "isPartial": false,
+  "isRunning": false,
+  "total": 1,
+  "loaded": 1,
+  "isRestored": false
+}`}
+          </EuiCodeBlock>
+        </div>
+      </EuiFlyout>
+    );
+  }
+
+  return (
+    <div>
+      <EuiButton onClick={() => setIsFlyoutVisible(true)}>
+        Show flyout example
+      </EuiButton>
+      {flyout}
+    </div>
+  );
+};

From 9d5d024dde5916c563823303d9ff6c83bf6aa937 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 26 Jul 2021 10:45:21 -0500
Subject: [PATCH 13/13] copy

---
 src/components/code/_code_block.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx
index 66f3af90c881..a3b1af5f3fbc 100644
--- a/src/components/code/_code_block.tsx
+++ b/src/components/code/_code_block.tsx
@@ -285,8 +285,10 @@ export const EuiCodeBlockImpl: FunctionComponent<EuiCodeBlockImplProps> = ({
     return <span {...wrapperProps}>{codeSnippet}</span>;
   }
 
-  const getCopyButton = (textToCopy?: string) => {
+  const getCopyButton = (_textToCopy?: string) => {
     let copyButton: JSX.Element | undefined;
+    // Fallback to `children` in the case of virtualized blocks.
+    const textToCopy = _textToCopy || `${children}`;
 
     if (isCopyable && textToCopy) {
       copyButton = (