Refactor react-tiny-virtual-list (#159023)

## Summary

`react-tiny-virtual-list ` wasn't updated for over 5 years 🤯

package.json

@@ -123,6 +123,7 @@
     "@hapi/hoek": "^9.2.1",
     "@hapi/inert": "^6.0.4",
     "@hapi/wreck": "^17.1.0",
+    "@juggle/resize-observer": "^3.4.0",
     "@kbn/aad-fixtures-plugin": "link:x-pack/test/alerting_api_integration/common/plugins/aad",
     "@kbn/ace": "link:packages/kbn-ace",
     "@kbn/actions-plugin": "link:x-pack/plugins/actions",
@@ -897,7 +898,7 @@
     "puppeteer": "20.1.0",
     "query-string": "^6.13.2",
     "rbush": "^3.0.1",
-    "re-resizable": "^6.1.1",
+    "re-resizable": "^6.9.9",
     "re2": "1.17.4",
     "react": "^17.0.2",
     "react-ace": "^7.0.5",
@@ -924,10 +925,9 @@
     "react-router-dom": "^5.2.0",
     "react-shortcuts": "^2.1.0",
     "react-syntax-highlighter": "^15.3.1",
-    "react-tiny-virtual-list": "^2.2.0",
     "react-use": "^15.3.8",
     "react-virtualized": "^9.22.5",
-    "react-visibility-sensor": "^5.1.1",
+    "react-window": "^1.8.9",
     "recompose": "^0.30.0",
     "reduce-reducers": "^1.0.4",
     "redux": "^4.2.0",
@@ -943,7 +943,6 @@
     "remark-stringify": "^8.0.3",
     "require-in-the-middle": "^6.0.0",
     "reselect": "^4.1.6",
-    "resize-observer-polyfill": "^1.5.1",
     "rison-node": "1.0.2",
     "rrule": "2.6.4",
     "rxjs": "^7.5.5",
@@ -966,7 +965,7 @@
     "typescript-fsa": "^3.0.0",
     "typescript-fsa-reducers": "^1.2.2",
     "unified": "^9.2.1",
-    "use-resize-observer": "^6.0.0",
+    "use-resize-observer": "^9.1.0",
     "usng.js": "^0.4.5",
     "utility-types": "^3.10.0",
     "uuid": "9.0.0",
@@ -1299,6 +1298,7 @@
     "@types/react-syntax-highlighter": "^15.4.0",
     "@types/react-test-renderer": "^17.0.2",
     "@types/react-virtualized": "^9.21.22",
+    "@types/react-window": "^1.8.5",
     "@types/recompose": "^0.30.10",
     "@types/redux-actions": "^2.6.1",
     "@types/redux-logger": "^3.0.8",
@@ -1320,7 +1320,6 @@
     "@types/tinycolor2": "^1.4.1",
     "@types/tough-cookie": "^4.0.2",
     "@types/type-detect": "^4.0.1",
-    "@types/use-resize-observer": "^6.0.0",
     "@types/uuid": "^9.0.0",
     "@types/vinyl": "^2.0.4",
     "@types/vinyl-fs": "^2.4.11",

src/plugins/dashboard/public/dashboard_container/component/viewport/dashboard_viewport.tsx

@@ -22,11 +22,13 @@ import { DashboardEmptyScreen } from '../empty_screen/dashboard_empty_screen';
 
 export const useDebouncedWidthObserver = (wait = 250) => {
   const [width, setWidth] = useState<number>(0);
-  const onWidthCange = useMemo(() => debounce(setWidth, wait), [wait]);
+  const onWidthChange = useMemo(() => debounce(setWidth, wait), [wait]);
   const { ref } = useResizeObserver<HTMLDivElement>({
     onResize: (dimensions) => {
-      if (width === 0) setWidth(dimensions.width);
-      if (dimensions.width !== width) onWidthCange(dimensions.width);
+      if (dimensions.width) {
+        if (width === 0) setWidth(dimensions.width);
+        if (dimensions.width !== width) onWidthChange(dimensions.width);
+      }
     },
   });
   return { ref, width };

src/plugins/data_view_field_editor/public/components/preview/field_list/field_list.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import React, { useState, useMemo, useCallback } from 'react';
-import VirtualList from 'react-tiny-virtual-list';
+import { FixedSizeList as VirtualList, areEqual } from 'react-window';
 import { i18n } from '@kbn/i18n';
 import { get, isEqual } from 'lodash';
 import { EuiButtonEmpty, EuiButton, EuiSpacer, EuiEmptyPrompt, EuiTextColor } from '@elastic/eui';
@@ -15,6 +15,7 @@ import { useFieldEditorContext } from '../../field_editor_context';
 import { useFieldPreviewContext } from '../field_preview_context';
 import type { FieldPreview, PreviewState } from '../types';
 import { PreviewListItem } from './field_list_item';
+import type { PreviewListItemProps } from './field_list_item';
 import { useStateSelector } from '../../../state_utils';
 
 import './field_list.scss';
@@ -50,6 +51,24 @@ function fuzzyMatch(searchValue: string, text: string) {
 const pinnedFieldsSelector = (s: PreviewState) => s.pinnedFields;
 const currentDocumentSelector = (s: PreviewState) => s.documents[s.currentIdx];
 
+interface RowProps {
+  index: number;
+  style: React.CSSProperties;
+  data: { filteredFields: DocumentField[]; toggleIsPinned: PreviewListItemProps['toggleIsPinned'] };
+}
+
+const Row = React.memo<RowProps>(({ data, index, style }) => {
+  // Data passed to List as "itemData" is available as props.data
+  const { filteredFields, toggleIsPinned } = data;
+  const field = filteredFields[index];
+
+  return (
+    <div key={field.key} style={style} data-test-subj="indexPatternFieldList">
+      <PreviewListItem key={field.key} field={field} toggleIsPinned={toggleIsPinned} />
+    </div>
+  );
+}, areEqual);
+
 export const PreviewFieldList: React.FC<Props> = ({ height, clearSearch, searchValue = '' }) => {
   const { dataView } = useFieldEditorContext();
   const { controller } = useFieldPreviewContext();
@@ -179,6 +198,11 @@ export const PreviewFieldList: React.FC<Props> = ({ height, clearSearch, searchV
       </div>
     );
 
+  const itemData = useMemo(
+    () => ({ filteredFields, toggleIsPinned: controller.togglePinnedField }),
+    [filteredFields, controller.togglePinnedField]
+  );
+
   if (currentDocument === undefined || height === -1) {
     return null;
   }
@@ -193,23 +217,12 @@ export const PreviewFieldList: React.FC<Props> = ({ height, clearSearch, searchV
           style={{ overflowX: 'hidden' }}
           width="100%"
           height={listHeight}
+          itemData={itemData}
           itemCount={filteredFields.length}
           itemSize={ITEM_HEIGHT}
-          overscanCount={4}
-          renderItem={({ index, style }) => {
-            const field = filteredFields[index];
-
-            return (
-              <div key={field.key} style={style} data-test-subj="indexPatternFieldList">
-                <PreviewListItem
-                  key={field.key}
-                  field={field}
-                  toggleIsPinned={controller.togglePinnedField}
-                />
-              </div>
-            );
-          }}
-        />
+        >
+          {Row}
+        </VirtualList>
       )}
 
       {renderToggleFieldsButton()}

src/plugins/data_view_field_editor/public/components/preview/field_list/field_list_item.tsx

@@ -26,7 +26,7 @@ import type { DocumentField } from './field_list';
 import { PreviewState } from '../types';
 import { useStateSelector } from '../../../state_utils';
 
-interface Props {
+export interface PreviewListItemProps {
   field: DocumentField;
   toggleIsPinned?: (name: string) => void;
   hasScriptError?: boolean;
@@ -36,7 +36,7 @@ interface Props {
 
 const isLoadingPreviewSelector = (state: PreviewState) => state.isLoadingPreview;
 
-export const PreviewListItem: React.FC<Props> = ({
+export const PreviewListItem: React.FC<PreviewListItemProps> = ({
   field: { key, value, formattedValue, isPinned = false },
   toggleIsPinned,
   hasScriptError,

src/plugins/kibana_utils/public/resize_checker/resize_checker.test.ts

@@ -11,8 +11,8 @@ import { EventEmitter } from 'events';
 
 // If you want to know why these mocks are created,
 // please check: https://github.com/elastic/kibana/pull/44750
-jest.mock('resize-observer-polyfill');
-import ResizeObserver from 'resize-observer-polyfill';
+jest.mock('@juggle/resize-observer');
+import { ResizeObserver } from '@juggle/resize-observer';
 
 class MockElement {
   public clientWidth: number;

src/plugins/kibana_utils/public/resize_checker/resize_checker.ts

@@ -8,7 +8,7 @@
 
 import { EventEmitter } from 'events';
 import { isEqual } from 'lodash';
-import ResizeObserver from 'resize-observer-polyfill';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 function getSize(el: HTMLElement): [number, number] {
   return [el.clientWidth, el.clientHeight];

tsconfig.base.json

@@ -1481,7 +1481,6 @@
       // END AUTOMATED PACKAGE LISTING
       // Allows for importing from `kibana` package for the exported types.
       "@emotion/core": ["typings/@emotion"],
-      "resize-observer-polyfill": ["typings/resize-observer-polyfill"]
     },
     // Support .tsx files and transform JSX into calls to React.createElement
     "jsx": "react",

typings/resize-observer-polyfill/index.d.ts

@@ -1,10 +0,0 @@
-/*
- * 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.
- */
-
-// eslint-disable-next-line import/no-default-export
-export default ResizeObserver;

x-pack/packages/security-solution/data_table/components/data_table/index.test.tsx

@@ -48,13 +48,6 @@ jest.mock('../../hooks/use_selector', () => ({
   useDeepEqualSelector: () => mockGlobalState.dataTable.tableById['table-test'],
 }));
 
-jest.mock(
-  'react-visibility-sensor',
-  () =>
-    ({ children }: { children: (args: { isVisible: boolean }) => React.ReactNode }) =>
-      children({ isVisible: true })
-);
-
 window.matchMedia = jest.fn().mockImplementation((query) => {
   return {
     matches: false,

x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/search_fields/search_result.tsx

@@ -5,8 +5,8 @@
  * 2.0.
  */
 
-import React from 'react';
-import VirtualList from 'react-tiny-virtual-list';
+import React, { useMemo } from 'react';
+import { FixedSizeList as VirtualList, areEqual } from 'react-window';
 import { EuiEmptyPrompt, EuiButton } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 
@@ -22,6 +22,33 @@ interface Props {
 
 const ITEM_HEIGHT = 64;
 
+interface RowProps {
+  index: number;
+  style: React.CSSProperties;
+  data: {
+    result: Props['result'];
+    status: Props['documentFieldsState']['status'];
+    fieldToEdit: Props['documentFieldsState']['fieldToEdit'];
+  };
+}
+
+const Row = React.memo<RowProps>(({ data, index, style }) => {
+  // Data passed to List as "itemData" is available as props.data
+  const { fieldToEdit, result, status } = data;
+  const item = result[index];
+
+  return (
+    <div key={item.field.id} style={style}>
+      <SearchResultItem
+        item={item}
+        areActionButtonsVisible={status === 'idle'}
+        isDimmed={status === 'editingField' && fieldToEdit !== item.field.id}
+        isHighlighted={status === 'editingField' && fieldToEdit === item.field.id}
+      />
+    </div>
+  );
+}, areEqual);
+
 export const SearchResult = React.memo(
   ({ result, documentFieldsState: { status, fieldToEdit }, style: virtualListStyle }: Props) => {
     const dispatch = useDispatch();
@@ -31,6 +58,11 @@ export const SearchResult = React.memo(
       dispatch({ type: 'search:update', value: '' });
     };
 
+    const itemData = useMemo(
+      () => ({ result, status, fieldToEdit }),
+      [fieldToEdit, result, status]
+    );
+
     return result.length === 0 ? (
       <EuiEmptyPrompt
         data-test-subj="mappingsEditorSearchResultEmptyPrompt"
@@ -58,24 +90,12 @@ export const SearchResult = React.memo(
         style={{ overflowX: 'hidden', ...virtualListStyle }}
         width="100%"
         height={listHeight}
+        itemData={itemData}
         itemCount={result.length}
         itemSize={ITEM_HEIGHT}
-        overscanCount={4}
-        renderItem={({ index, style }) => {
-          const item = result[index];
-
-          return (
-            <div key={item.field.id} style={style}>
-              <SearchResultItem
-                item={item}
-                areActionButtonsVisible={status === 'idle'}
-                isDimmed={status === 'editingField' && fieldToEdit !== item.field.id}
-                isHighlighted={status === 'editingField' && fieldToEdit === item.field.id}
-              />
-            </div>
-          );
-        }}
-      />
+      >
+        {Row}
+      </VirtualList>
     );
   }
 );

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/pipeline_processors_editor.helpers.tsx

@@ -48,16 +48,9 @@ jest.mock('@kbn/kibana-react-plugin/public', () => {
   };
 });
 
-jest.mock('react-virtualized', () => {
-  const original = jest.requireActual('react-virtualized');
-
-  return {
-    ...original,
-    AutoSizer: ({ children }: { children: any }) => (
-      <div>{children({ height: 500, width: 500 })}</div>
-    ),
-  };
-});
+jest.mock('react-virtualized/dist/commonjs/AutoSizer', () => ({ children }: { children: any }) => (
+  <div>{children({ height: 500, width: 500 })}</div>
+));
 
 const testBedSetup = registerTestBed<TestSubject>(
   (props: Props) => <ProcessorsEditorWithDeps {...props} />,

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx

@@ -55,16 +55,9 @@ jest.mock('@elastic/eui', () => {
   };
 });
 
-jest.mock('react-virtualized', () => {
-  const original = jest.requireActual('react-virtualized');
-
-  return {
-    ...original,
-    AutoSizer: ({ children }: { children: any }) => (
-      <div>{children({ height: 500, width: 500 })}</div>
-    ),
-  };
-});
+jest.mock('react-virtualized/dist/commonjs/AutoSizer', () => ({ children }: { children: any }) => (
+  <div>{children({ height: 500, width: 500 })}</div>
+));
 
 const testBedSetup = registerTestBed<TestSubject>(
   (props: Props) => <ProcessorsEditorWithDeps {...props} />,

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/test_pipeline.helpers.tsx

@@ -40,16 +40,9 @@ jest.mock('@kbn/kibana-react-plugin/public', () => {
   };
 });
 
-jest.mock('react-virtualized', () => {
-  const original = jest.requireActual('react-virtualized');
-
-  return {
-    ...original,
-    AutoSizer: ({ children }: { children: any }) => (
-      <div>{children({ height: 500, width: 500 })}</div>
-    ),
-  };
-});
+jest.mock('react-virtualized/dist/commonjs/AutoSizer', () => ({ children }: { children: any }) => (
+  <div>{children({ height: 500, width: 500 })}</div>
+));
 
 const testBedSetup = registerTestBed<TestSubject>(
   (props: Props) => <ProcessorsEditorWithDeps {...props} />,

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processors_tree/components/private_tree.tsx

@@ -7,7 +7,9 @@
 
 import React, { FunctionComponent, MutableRefObject, useEffect, useMemo } from 'react';
 import { EuiFlexGroup } from '@elastic/eui';
-import { AutoSizer, List, WindowScroller } from 'react-virtualized';
+import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
+import List from 'react-virtualized/dist/commonjs/List';
+import WindowScroller from 'react-virtualized/dist/commonjs/WindowScroller';
 
 import { DropSpecialLocations } from '../../../constants';
 import { ProcessorInternal, ProcessorSelector } from '../../../types';

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processors_tree/processors_tree.tsx

@@ -7,7 +7,8 @@
 
 import React, { FunctionComponent, memo, useRef, useEffect } from 'react';
 import { EuiFlexGroup, EuiFlexItem, keys } from '@elastic/eui';
-import { List, WindowScroller } from 'react-virtualized';
+import List from 'react-virtualized/dist/commonjs/List';
+import WindowScroller from 'react-virtualized/dist/commonjs/WindowScroller';
 
 import { DropSpecialLocations } from '../../constants';
 import { ProcessorInternal, ProcessorSelector } from '../../types';

x-pack/plugins/security_solution/public/common/components/charts/draggable_legend.tsx

@@ -45,10 +45,10 @@ const DraggableLegendContainer = styled.div<{ height: number; $minWidth: number
 
 const DraggableLegendComponent: React.FC<{
   className?: string;
-  height: number;
+  height: number | undefined;
   legendItems: LegendItem[];
   minWidth?: number;
-}> = ({ className, height, legendItems, minWidth = DEFAULT_WIDTH }) => {
+}> = ({ className, height = 0, legendItems, minWidth = DEFAULT_WIDTH }) => {
   if (legendItems.length === 0) {
     return null;
   }

x-pack/plugins/security_solution/public/common/components/event_details/overview/index.tsx

@@ -198,7 +198,7 @@ export const Overview = React.memo<Props>(
 
     // 675px is the container width at which none of the cards, when hovered,
     // creates a visual overflow in a single row setup
-    const showAsSingleRow = width === 0 || width >= 675;
+    const showAsSingleRow = width === 0 || (width && width >= 675);
 
     // Only render cards with content
     const cards = [signalCard, severityCard, riskScoreCard, ruleNameCard].filter(isNotNull);

x-pack/plugins/security_solution/public/common/components/events_viewer/event_details_width_context.tsx

@@ -8,7 +8,9 @@
 import React, { createContext, useContext } from 'react';
 import { useThrottledResizeObserver } from '../utils';
 
-const EventDetailsWidthContext = createContext(0);
+const DEFAULT_WIDTH = 0;
+
+const EventDetailsWidthContext = createContext(DEFAULT_WIDTH);
 
 export const useEventDetailsWidthContext = () => useContext(EventDetailsWidthContext);
 
@@ -17,7 +19,7 @@ export const EventDetailsWidthProvider = React.memo(({ children }) => {
 
   return (
     <>
-      <EventDetailsWidthContext.Provider value={width}>
+      <EventDetailsWidthContext.Provider value={width ?? DEFAULT_WIDTH}>
         {children}
       </EventDetailsWidthContext.Provider>
       <div ref={ref} />

x-pack/plugins/security_solution/public/common/components/utils.ts

@@ -33,7 +33,7 @@ export const histogramDateTimeFormatter = (domain: [string, string] | null, fixe
 };
 
 export const useThrottledResizeObserver = (wait = 100) => {
-  const [size, setSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 });
+  const [size, setSize] = useState<{ width?: number; height?: number }>({ width: 0, height: 0 });
   const onResize = useMemo(() => throttle(wait, setSize), [wait]);
   const { ref } = useResizeObserver<HTMLDivElement>({ onResize });
 

x-pack/plugins/security_solution/public/resolver/types.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import type ResizeObserver from 'resize-observer-polyfill';
+import type { ResizeObserver } from '@juggle/resize-observer';
 import type React from 'react';
 import type { Store, Middleware, Dispatch } from 'redux';
 import type { BBox } from 'rbush';

x-pack/plugins/security_solution/public/resolver/view/side_effect_context.ts

@@ -7,7 +7,7 @@
 
 import type { Context } from 'react';
 import { createContext } from 'react';
-import ResizeObserver from 'resize-observer-polyfill';
+import { ResizeObserver } from '@juggle/resize-observer';
 import type { SideEffectors } from '../types';
 
 /**

x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx

@@ -138,13 +138,6 @@ jest.mock(
 // Prevent Resolver from rendering
 jest.mock('../../graph_overlay');
 
-jest.mock(
-  'react-visibility-sensor',
-  () =>
-    ({ children }: { children: (args: { isVisible: boolean }) => React.ReactNode }) =>
-      children({ isVisible: true })
-);
-
 jest.mock('../../fields_browser/create_field_button', () => ({
   useCreateFieldButton: () => <></>,
 }));

x-pack/plugins/session_view/public/components/session_view/index.test.tsx

@@ -18,6 +18,7 @@ import { SessionView } from '.';
 import userEvent from '@testing-library/user-event';
 import { useDateFormat } from '../../hooks';
 import { GET_TOTAL_IO_BYTES_ROUTE, PROCESS_EVENTS_ROUTE } from '../../../common/constants';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 jest.mock('../../hooks/use_date_format');
 const mockUseDateFormat = useDateFormat as jest.Mock;
@@ -45,7 +46,7 @@ describe('SessionView component', () => {
       })),
     });
 
-    global.ResizeObserver = require('resize-observer-polyfill');
+    global.ResizeObserver = ResizeObserver;
   });
 
   beforeEach(() => {

x-pack/plugins/session_view/public/components/tty_player/index.test.tsx

@@ -15,6 +15,7 @@ import { sessionViewIOEventsMock } from '../../../common/mocks/responses/session
 import { AppContextTestRender, createAppRootMockRenderer } from '../../test';
 import { TTYPlayerDeps, TTYPlayer } from '.';
 import userEvent from '@testing-library/user-event';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 describe('TTYPlayer component', () => {
   beforeAll(() => {
@@ -34,7 +35,7 @@ describe('TTYPlayer component', () => {
       })),
     });
 
-    global.ResizeObserver = require('resize-observer-polyfill');
+    global.ResizeObserver = ResizeObserver;
   });
 
   let render: () => ReturnType<AppContextTestRender['render']>;

yarn.lock

@@ -2843,6 +2843,11 @@
   resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796"
   integrity sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==
 
+"@juggle/resize-observer@^3.3.1", "@juggle/resize-observer@^3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
+  integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
+
 "@kbn/aad-fixtures-plugin@link:x-pack/test/alerting_api_integration/common/plugins/aad":
   version "0.0.0"
   uid ""
@@ -9489,13 +9494,6 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
   integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==
 
-"@types/use-resize-observer@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@types/use-resize-observer/-/use-resize-observer-6.0.0.tgz#d1b162b2733b22225908a7877ca7115c67f3752e"
-  integrity sha512-8RD06szR+wzHpfCBFbcTEQ0OCoogoSWCyyUmWyqc5qGG2fa1sOUdwNte5dwoJWG/sh5sBU0QVZ1+9zcQGLUSVg==
-  dependencies:
-    "@types/react" "*"
-
 "@types/uuid@^9.0.0":
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.0.tgz#53ef263e5239728b56096b0a869595135b7952d2"
@@ -15943,11 +15941,6 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
-fast-memoize@^2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.1.tgz#c3519241e80552ce395e1a32dcdde8d1fd680f5d"
-  integrity sha512-xdmw296PCL01tMOXx9mdJSmWY29jQgxyuZdq0rEHMu+Tpe1eOEtCycoG6chzlcrWsNgpZP7oL8RiQr7+G6Bl6g==
-
 fast-redact@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/fast-redact/-/fast-redact-3.0.0.tgz#ac2f9e36c9f4976f5db9fb18c6ffbaf308cf316d"
@@ -24301,12 +24294,10 @@ re-reselect@^3.4.0:
   resolved "https://registry.yarnpkg.com/re-reselect/-/re-reselect-3.4.0.tgz#0f2303f3c84394f57f0cd31fea08a1ca4840a7cd"
   integrity sha512-JsecfN+JlckncVXTWFWjn0Vk6uInl8GSf4eEd9tTk5qXHlgqkPdILpnYpgZcISXNYAzvfvsCZviaDk8AxyS5sg==
 
-re-resizable@^6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.1.1.tgz#7ff7cfe92c0b9d8b0bceaa578aadaeeff8931eaf"
-  integrity sha512-ngzX5xbXi9LlIghJUYZaBDkJUIMLYqO3tQ2cJZoNprCRGhfHnbyufKm51MZRIOBlLigLzPPFKBxQE8ZLezKGfA==
-  dependencies:
-    fast-memoize "^2.5.1"
+re-resizable@^6.9.9:
+  version "6.9.9"
+  resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.9.tgz#99e8b31c67a62115dc9c5394b7e55892265be216"
+  integrity sha512-l+MBlKZffv/SicxDySKEEh42hR6m5bAHfNu3Tvxks2c4Ah+ldnWjfnVRwxo/nxF27SsUsxDS0raAzFuJNKABXA==
 
 re2@1.17.4:
   version "1.17.4"
@@ -24771,13 +24762,6 @@ react-textarea-autosize@^8.3.4:
     use-composed-ref "^1.3.0"
     use-latest "^1.2.1"
 
-react-tiny-virtual-list@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/react-tiny-virtual-list/-/react-tiny-virtual-list-2.2.0.tgz#eafb6fcf764e4ed41150ff9752cdaad8b35edf4a"
-  integrity sha512-MDiy2xyqfvkWrRiQNdHFdm36lfxmcLLKuYnUqcf9xIubML85cmYCgzBJrDsLNZ3uJQ5LEHH9BnxGKKSm8+C0Bw==
-  dependencies:
-    prop-types "^15.5.7"
-
 react-transition-group@^4.3.0:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
@@ -24830,17 +24814,10 @@ react-virtualized@^9.22.5:
     prop-types "^15.7.2"
     react-lifecycles-compat "^3.0.4"
 
-react-visibility-sensor@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/react-visibility-sensor/-/react-visibility-sensor-5.1.1.tgz#5238380960d3a0b2be0b7faddff38541e337f5a9"
-  integrity sha512-cTUHqIK+zDYpeK19rzW6zF9YfT4486TIgizZW53wEZ+/GPBbK7cNS0EHyJVyHYacwFEvvHLEKfgJndbemWhB/w==
-  dependencies:
-    prop-types "^15.7.2"
-
-react-window@^1.8.6:
-  version "1.8.6"
-  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
-  integrity sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==
+react-window@^1.8.6, react-window@^1.8.9:
+  version "1.8.9"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.9.tgz#24bc346be73d0468cdf91998aac94e32bc7fa6a8"
+  integrity sha512-+Eqx/fj1Aa5WnhRfj9dJg4VYATGwIUP2ItwItiJ6zboKWA6EX3lYDAXfGF2hyNqplEprhbtjbipiADEcwQ823Q==
   dependencies:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
@@ -28639,12 +28616,12 @@ use-memo-one@^1.1.1:
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20"
   integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==
 
-use-resize-observer@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-6.0.0.tgz#8450ade735c386e8d93cdf983c26d34a9f478a54"
-  integrity sha512-Zfe1qsZVhzfgECs+L/ZcSukyVPFGOmWtC7xZI5Lpn4PR2hNgVvD1NmQ/GYBoCSV2pJskxflJWcDzpTAt84nhvw==
+use-resize-observer@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-9.1.0.tgz#14735235cf3268569c1ea468f8a90c5789fc5c6c"
+  integrity sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==
   dependencies:
-    resize-observer-polyfill "^1.5.1"
+    "@juggle/resize-observer" "^3.3.1"
 
 use-sidecar@^1.1.2:
   version "1.1.2"